Question

这可能是一个非常容易回答的问题，但我一直坚持下去（我似乎偶尔遇到这个问题而且总是忘记如何解决它......）

http://nerdcomics.com/portfolio/pink_and_brwn/index.html

我创建了一个包含页眉，中间和页脚的页面。很简单吧？在中心内，我有标准的侧栏和内容div。然而，似乎内容div以某种方式滑落在侧边栏或其他东西下，因为它的内容似乎转到了页面的左侧。我知道有一个解决方案，但我可能会浮动/清除/等等，我似乎一直有同样的问题。 Firebug告诉我，内容似乎有点吃掉边栏...（视觉上，无论如何）

到目前为止，这是css的开头：

    @charset "utf-8";
/* CSS Document */
body {
    font:"MS Serif", "New York", serif;
    background: #000;
    position:relative;
}

a {
    color: #fff;
    text-decoration: none;
}
a:visited {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #666;
    text-decoration: underline;
}

p {
    padding: 0px 0px 15px;

}
h1 {

    background: #99C no-repeat;
    font: bold 36px/100% Georgia, "Times New Roman", Times, serif;
    color: #000;
}
h1 a{
    color: #333;
    text-decoration: none;
}
h1 a:visited{
    color: #666;
    text-decoration: none;
}
h1 a:hover{
    color: #ffffff;
    text-decoration: none;
}
h2 {
    color: #F69;

    border-bottom: 1px dotted #F69;
    letter-spacing: -1px;
    font: normal 190%/100% Georgia, "Times New Roman", Times, serif;
    padding-bottom: 3px;
}
h2 a, h2 a:visited {
    color: #666;
    text-decoration: none;
}
h2 a:hover {
    color: #FFF;
    text-decoration: none;
}
h3 {
    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
    color: #758d38;
    margin: 10px 0px 5px;
}



.content p,h1,h2,h3
{margin:10px 100px 0 0;
}



/* div attributes for page layout */



}
#page {
    margin: 0px auto;
    width: 1000px;
    border-bottom: 0px solid #d5e6eb;
    border-left: 0px solid #d5e6eb;
    border-right: 0px solid #d5e6eb;
    background: #FFFFFF url(images/content-bg.gif) repeat-y;

}

#header {
    background: url(images/header.gif) no-repeat;
    width: 1000px;
    border-bottom: 0px solid #59780a;
    position: relative;
    clear:both;
}


#middle {
    background: url(images/bg.gif) repeat-y;
    width: 1000px;
    position: relative;
    clear:both;
}
#sidebar {
    width: 214px;
    position:relative;
    float:left;
    clear:right;
}

#content {
    position: relative;
    width:*;
    clear:both;
}
#footer {
    background: url(images/footer.gif) no-repeat;
    width: 1000px;
    height:77px;
    position: relative;
    float:none;
    clear:both;
}


#nav li {
    float: none;
    margin-left: 15px;
}
#nav a {
    color: #fff;
    text-decoration: none;
    background: none;
    padding: 5px 5px 15px 5px;
    font: bold 14px/100% serif;

}
#nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
#nav a:hover {
    color: #000000;
}

Answer 1

好吧..你有点做错了。我认为最好的方法是：

// header //

<div class="clearfix wrapper">
 <div class="sidebar"> your sidebar </div>
 <div class="mainContent"> your content </div>
</div><!--/.wrapper-->

//footer //

当然，你不要忘记doctype和所有标题内容：）

从CSS部分，您可以这样做：

首先，使用css重置。 You can use mine因为还包含clearfix黑客。然后，你这样做：

.sidebar { width:200px; float:left; } /* change with your width */
.mainContent { margin-left:200px; } /* also, change with sidebar width */

而且......就是这样。我也在很久以前就如何制作一个简单的布局做了一些教程。你可以读它here（忽略所有非语义ID :-)）

Answer 2

浮动你的#content div并在其上设置宽度。清除div（在你的情况下是#footer div）应该在#middle div中。

Answer 3

浮动#middle离开以缩小差距。

style.css（第97行）

#middle {
background:transparent url(images/bg.gif) repeat-y scroll 0%;
position:relative;
width:1000px;
float:left;
}

分裂相互砸碎

3 个答案: