Faux Column Problemo

Greetings from 10 degrees C wet & windy wetherby UK…

I’ve got a problem with a 2 page layout in that i cant remember how to close the gap in the green column. Specifically I get a purple background sneaking out below the green column as illustrated here:


IOve messed around with faux column but in ie 9 i get the green column stopping short. So my question is how do i get the green column to extend flush to the footer.

Here is the code:

body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}

#wrap {
width:750px;
margin:0 auto;
background:#99c;
background-image: url(faux-column-3.jpg);
background-position: top right;
background-repeat: repeat-y;
}
#header {
background:#ddd;
padding:5px 10px;
}
#nav {
background:#c99;
}
#main {
background:#9c9;
float:left;
width:500px;
}

#sidebar {
background:#c9c;
float:right;
width:250px;
}
#footer {
background:#cc9;
clear:both;
}

{
clear:both;
height:0px;
margin:0px;
}
#nav {
padding:5px 10px;
background:#c99;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}

h1 {
margin:0;
}

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“max-url-newsletter.css” />
</head>
<body>
<div id=“wrap”>
<div id=“header”><h1>Document Heading</h1></div>
<div id=“nav”>
<ul>
<li><a href=“#”>Option 1</a></li>
<li><a href=“#”>Option 2</a></li>
</ul>
</div>
<div id=“main”>
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.

Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.

Consectetuer adipiscing elit

Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.
</p>
</div>
<div id=“sidebar”>
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
<ul>
<li><a href=“#”>Link 1</a></li>
<li><a href=“#”>Link 2</a></li>
</ul>
</div>

<div id=“footer”>
<p>Footer</p>
</div>
</div>
</body>
</html>

Thanks in advance,
David

If you are using a faux column background image, you don’t want any elements inside it to have a background color, as that will sit over the top. But we’d need to see that image to know exactly what you are trying to do here.

You would normally put a background image on the #main div to represent the two columns.

Thanks ralph I’m going to get a live link soon but thank you :slight_smile:

Fixed the problem with this:

  • html #footer {
    height:1px;
    }

Sourced from here: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Thanks :slight_smile: