Question

I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn’t even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.

HTML:

<div id="container">

<div id="head">
</div>          


<div id="menuTop">
</div>

<div id="content">
</div>

<div id="sidebar">
</div>

<div id="footer">
</div>  
</div> 

CSS:

#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}

#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}

#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}

Answer 1

CSS Box Model 101 – the actual width of a div (or any element) is width + padding + borders

So your two floated divs add up to 1001px

the content div @ 750px + 1px border is actually 751px wide, make it’s width 749px and all should be well