[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