Borders contained in a container <div>

I want left/right borders surrounding everything

[paulpsd]

Okay, now I'm trying to get left and right borders going down the page. I've got a leftnav and content div, and they're both wrapped in a div called content_wrapper, which contains the borders. Here's my CSS:

#content_wrapper {
width: 760px;
z-index: 2;
text-align:left;
vertical-align:top;
border-left: 1px solid #202188;
border-right: 1px solid #202188;
}

#leftnav {
float: left;
width: 150px;
text-align:center;
vertical-align:middle;
}

#content {
float: right;
width: 610px;
text-align:center;
vertical-align:middle;
}

And here's the HTML:

<div id="content_wrapper">
<div id="leftnav">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="content">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

These items layout correctly, except my borders don't show up.

[collymellon]

Using your code the boders show up fine my end (I.E)..

[createErrorMsg]

the boders show up fine my end (I.E)

That's because IE auto-encloses floats in their parent container, but this is not how the specs tell floats to behave. It's another example of IE getting it wrong. Floats are supposed to poke out of the bottom of their containers. If you want the parent to contain them, you have to ask the browser (at least compliant browsers) explicitly to do so.

There are several options. Here are the "top two":

Float the Container
If you apply a float property to the parent container, compliant browsers will expand it to contain the floated children.

Simply add float:left to the #content_wrapper styles.

Clearing Element
If floating the container causes other, unresolvable layout problems, you can add a clearing element to the bottom of the container. A common practice is to use a <br />...

html:
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
<br class="clear" />
</div>

css:
.clear{clear:both;}

Either solution will work. I prefer the first because it doesn't require adding elements to the source code, but many people use the second method without even a twinge of guilt. ;)

cEM

[paulpsd]

Fantastic! Thanks a lot. Everything works fine now.

In addition to your suggestion about making content_wrapper float, I also used this piece of code to ensure that the float clears afterwards.

div#content_wrapper: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility:hidden;
}

I picked this up here:
[csscreator.com ]