Css 潜水艇互相碰撞

这可能是一个可笑的容易回答的问题，但我一直被困在这个问题上（我似乎偶尔遇到这个问题，总是忘记如何解决它…）

我创建了一个带有页眉、中间和页脚的页面。很简单，对吧？在中间，我有标准的侧栏和内容div。然而，似乎content 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;
}

---

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

// header //

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

//footer //

而且。。。这就是全部。我还做了一些类似于很久以前的关于如何制作简单布局的教程。您可以读取它（忽略所有非语义ID:-）

浮动您的#content div并设置其宽度。清除div（在您的情况下是#页脚div）应位于#中间div内。

Float

#middle

左侧以缩小间隙

style.css（第97行）

---

请尝试重新格式化，这样我们就可以真正阅读您的css。

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

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