Divs врезаться друг в друга

Question

Вероятно, это нелепо простой вопрос, но я застрял на нем (мне кажется, я иногда сталкиваюсь с этой проблемой и всегда забываю, как ее исправить ...)

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

Я создал страницу с верхним, нижним и нижним колонтитулом. Достаточно просто, верно? В центре у меня есть стандартная боковая панель и элементы содержимого. Тем не менее, кажется, что div содержимого каким-то образом проскользнул под боковую панель или что-то в этом роде, потому что его содержимое, похоже, уходит на левую сторону страницы. Я знаю, что есть решение для этого, но float / clear / etc, как я мог, у меня, похоже, продолжает возникать та же проблема. 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

Переместите ваш #content div и установите его ширину. Очищающий div (в вашем случае это #footer div) должен находиться внутри #middle div.

Answer 2

Float #middle осталось закрыть пробел.

style.css (строка 97)

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

Answer 3

Ну .. Ты вроде как делаешь неправильно. Лучший подход к этому, я думаю, таков:

// header //

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

//footer //

Конечно, не забудьте про doctype и все заголовки :))

Начиная с CSS, вы делаете так:

Прежде всего, используйте сброс CSS. Вы можете использовать мой , потому что также включите взлом clearfix. Затем вы делаете это так:

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

И ... Это все. Я также сделал какое-то руководство, как давным-давно, о том, как сделать простой макет. Вы можете прочитать это здесь (игнорируйте все несемантические идентификаторы :-))