Divs smashing into each other

Question

Hi,

This is probably a ridiculously easy to answer question, but I have been stuck on it (I seem to run into this problem occasionally and always forget how to fix it...)

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

I have created a page with a header, middle, and footer. Simple enough, right? Within the center, I have the standard side bar and content divs. However, it seems the content div somehow slipped under the side bar or something, because its content seems to go to the left side of the page. I know there's a solution for this, but float/clear/etc as I might, I seem to keep having the same issue. Firebug tells me that content seems to have sort of eaten the side bar... (visually, anyway)

Please help if you can! Thanks!

---bree

Here's the beginnings of the css so far:

    @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

Well.. You kinda doing wrong. The best approach for this I think is this:

// header //

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

//footer //

Of course, don't you forget the doctype and all header stuff :)

From CSS part, you do this way:

First of all, use a css reset. You can use mine because also include the clearfix hack. Then, you do this way:

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

And... That's all. I also made some kind of tutorial like ages ago on how to make a simple layout. You can read it here (ignore the all non semantic ID's :-) )

Answer 2

Float your #content div and set a width on it. The clearing div (which in your case is the #footer div) should be inside the #middle div.

Answer 3

Thanks guys, now I have floated the sidebar left, but I do not float the content right, otherwise, I lose the background of the middle.

Now, I seem to have just the issue of making the vertical spaces go away. I can't get the middle to stick to the top, now.

Please help some more? Thanks!!! http://nerdcomics.com/portfolio/pink_and_brwn/index.html

Answer 4

Float #middle left to close the gap.

style.css (line 97)

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

Answer 5

YAAAAAAAAAAAAAAAAY thanks to everyone!

go floating!

Next step is to put something halfway decent on there. Wish me luck!

Thanks again!