CODEWITHSUNDEEP
css
Katelyn
Katelyn

Reputation: 35

CSS: Sidebar div will not stay in place!

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;
}

Upvotes: 1

Views: 728

Answers (2)

danyolgiax
danyolgiax

Reputation: 13086

#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;
display:block;
}

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



<div id="container">

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


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

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

<div id="sidebar">ffff
</div>
    <br style="clear:both;" />
<div id="footer">
</div>  
</div>

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

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

Upvotes: 1

Related Questions