2 replies [Last post]
Last seen: 17 years 39 weeks ago
Timezone: GMT-7
Joined: 2004-04-16
Posts: 1
Points: 0

I've been trying to do a tableless photo gallery. I've tried searching the web for answers to this, but I get no good discussions that a newbie like myself can grasp. Here's an example of my work so far... can someone tell me why the floated divs containing the images are not contained within the middle div, even though they're nested? Styles are all inlined for easy viewing as source, and are from an experimental sheet that I'm using for learning purposes, so it's a bit messy (it contains more styles than my "production" sheet that I'm working on, but isn't quite finished). I apologize for that in advance.

I'm trying to view this in IE6, and the images continue all the way to the right edge of the browser, but "duck under" the right nav box.

In Firefox, they line up properly, but the middle div doesn't actually CONTAIN them (it doesn't grow vertically to contain all the images).


Perth, Australia
Last seen: 13 years 42 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Newbie CSS box/float question.

I would still use a table layout for tabular data like that.

I am Dan, Dan I am.

Big John
Big John's picture
Last seen: 18 years 12 weeks ago
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Newbie CSS box/float question.

You have two problems. One is the IE bug which can be
killed via the Holly hack. Add this to the stylesheet:

/* Hide from IE-mac \*/
* html .content, * html #middle {
height: 1%;
/* End hide */

This gives IE/win the dimension it must have to not
be buggy. By writing the rule like this it is 'seen' only
by IE/win browsers. IE has a bad behavior that makes
it ignore the 1% height and expand the boxes, but the
escaping floats bug is killed anyway.

Since no width has been applied, the design remains liquid.

You must also remove the position: relative on .content
or IE6 will crash, and you must add a 'cleared element
directly after the last floated image.

<div style="clear: both;">&nbsp;</div>

Mozilla needs content in the div to work correctly.