[thelist] IE float problems in 3 column format

Mike Cordeiro cordeiro at awdi.ca
Fri Jan 16 13:09:20 CST 2004


I'm using the 3 column with header and footer layout from 
http://realworldstyle.com/nn4_3col_header.html combined with the 
floating thumbnails technique from 
http://realworldstyle.com/thumb_float.html.

The thumbnails are placed inside the centre column wrapped in their own 
floated:left div. Mozilla fits as many of the thumbnails as it can in a 
line inside the centre column and then wraps them to the next line. This 
is exactly the behaviour I was expecting. IE 6 however runs the thumbs 
out of the centre column and then wraps them, which is clearly not what 
I want to happen.

Here's the CSS for the layout:

#header {
    padding-left: 10px;
    color: #000;
    border-bottom: 1px solid #333;
    height: 90px;
    }

#leftcolumn {
    float: left;
    width: 160px;
    margin-left: 10px;
    margin-top: 0px;
    color: #000;
    padding: 3px;
    }
#centercolumn {
    margin: 0px 22% 0px 180px;
    padding: 3px;
    color: #000;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
    font-size:80%;
    }
   
#rightcolumn {
    position: absolute;
    left: 78.5%;
    top: 90px;
    width: 160px;
    padding-left: 10px;
    z-index: 3;
    color: #000;
    padding: 3px;
    }
   
#footer {
    clear: both;
    padding-left: 10px;
    text-align: center;
    font-size: 60%;
    padding: 3px;
    border-top: 1px solid #333;
    color: #000;
    }

And now the CSS for the floated thumbnails:

div.float {
    float: left;
    width: 50px;
    margin: 5px;
    text-align: center;
  }

Finally some HTML:

<div id="header">Stuff</div>
<div id="leftcolumn">More stuff</div>

<div id="centercolumn">
  
Yet more stuff

<div class="float"><img src="image.gif" width="50" height="50" /><br 
/>Caption</div>
<div class="float"><img src="image.gif" width="50" height="50" /><br 
/>Caption</div>
<div class="float"><img src="image.gif" width="50" height="50" /><br 
/>Caption</div>

And a little more here too.

</div>
<div id="rightcolumn">More stuff</div>
<div id="footer">More stuff</div>

This is my first major project with an all CSS layout so naturally I 
have no idea where to begin. Does anyone know how to get IE to keep 
those thumbs inside the centre column?

-- 
______________________________________________________________________
Mike Cordeiro							cordeiro at awdi.ca



More information about the thelist mailing list