Topic: CSS IE problem has defeated me

I've banged my head against this one just too long!

You may be familiar with the LayoutGala site (, a set of very simple CSS layouts that can be applied to the same DIV markup.  I thought I'd extend this by adding eight more which have horizontal navigation about the main content area.  Here's one (but look at it with Firefox!). … ala41.html

As the navigation DIV comes after the content DIV, I tried using absolute positioning.  In Firefox, this works fine but in IE6 the navigation DIV vanishes.  I've tried the holly hack but it makes no difference.

The CSS is pretty simple:

/* CSS Document */
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#navcontainer ul li {display: inline;}
div#wrapper{margin-top: 40px; width:66%; float:left;}
div#content{margin: 0 33% 0 0}
div#extra{margin-top: 40px; left: 66%; width:33%; float:left;}

Can anyone help?


Re: CSS IE problem has defeated me

Chris..S at solved this one.  In IE (6 and 7), you need to have some normal (in flow, ie. not floated, not position:absolute) content in the container immediately before the absolutely positioned element.  Something as simple as a   will do the trick.

I've fixed the page on the link above and adjusted the CSS slightly to bring the third div up to the right position.  No CSS hacks are needed for this.