0

Basically, I'm attempting to get two divs side by side, here's the following layout I'm attempting to do.

<div id="content">
    <div id="search">

    </div>
    <div id="results">
        <h2>Waiting!</h2>
    </div>
</div>

Here's the CSS in which is positioning these divs they're side by side but pushed completely to the left of the page when I want them centred.

#content {

}
#search {
    float: left;
    width:​ 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow:​​ #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}

#results {
    float: left;
    width: 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow: #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}
4

4 回答 4

1

您可以使用 margin: 0 auto 使容器区域居中。尝试这个 -

#content{ margin: 0 auto; width: 90%; }

这可能会有所帮助。

于 2013-07-20T16:54:25.253 回答
0

有很多方法可以做到这一点，但最重要的是当你的内部元素浮动时，你应该overflow在你的容器上适当地设置。例如，您可以将 CSS 完全替换为：

#content {
   overflow:hidden;  /* or auto, or visible */
   width:820px;
   margin-left:auto; /* not necessary by default */
   margin-right:auto; /* not necessary by default */
}

#content > div {
   float:left;
   margin: 10px auto;
   -moz-box-shadow:#555 0 0 8px;
    -webkit-box-shadow:#555 0 0 8px;
    -o-box-shadow:#555 0 0 8px;
    box-shadow:#555 0 0 8px;
}
于 2013-07-20T16:49:50.827 回答
0

您必须将包装 div 居中以使它们都居中。在这里尝试一下http://jsfiddle.net/dAVub/

#content {
    width:800px;
    margin: 0 auto;
}
于 2013-07-20T16:49:05.670 回答
0

将此添加到您的CSS

#content {
text-align:center;}

替换float:left为display:inline-block;in#search 和#results

演示

于 2013-07-20T16:58:18.883 回答