CSS：无法使侧边栏正常工作

Question

我正在努力让侧边栏工作。但它并没有让#main部分与侧边栏一致。 相反，你得到侧边栏，然后是主要（放在下面）。 :(

此外，如果您可以获得侧边栏可能/可能不存在的解决方案，并且主要将填充空间，那就太棒了。

以下是我想要的内容。

以下是一些相关的CSS

#main 
{
    margin: 0 0 0 100px; /* This is my way of indenting it over the sidebar (not dynamic to no sidebar being present*/
    padding: 15px 15px 15px 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;   
}

ul#sidebar
{ 
    width: auto;
    /* float:left; */
    font-size: 95%;
    word-spacing: -0.1em;
    padding:10px 10px 10px 1px; 
}

页脚似乎工作正常。

Answer 1

你不需要主要的边距，你只需要向右浮动主导，或者向左浮动导航栏。我注意到你有一个浮动：左边注释掉ul;那不适合你？

Answer 2

您可以使用％设置宽度并将侧边栏浮动...

<div class="wrapper">
   <div class="sidebar">Sidebar</div>
   <div class="main">Main</div>
</div>

.wrapper {width:100%; overflow:hidden;}
.sidebar {width:8%; float:left; margin-right:2%;}
.main {width:90%; float:left;}

Answer 3

左边的漂浮是我常用的方法。但是，您需要记住在两个浮动元素之后清除浮动，否则您会像在页脚上提到的那样重叠。我通常通过执行clear:both定义的空div来处理此问题。

我对Grids说的不够。这里有标准的960和流体网格选项。然后，不用担心浮动，重叠或包裹。它刚刚为你完成。然后你可以把开发时间花在真正重要的事情上。