Example page:
http://www.splatteredink.net/test/
It is a two column layout with header. The header and two columns are in a
container div. The left column is floated left. The text of the left column
is in a div nested within the left column div because of the box-model
hack. There is another hack using margins to get the right column clear of
the left one in non-IE browsers.
The problem is that in Firefox 1.0 the container only extends as far down
as the right column, thus the left column overflows outside the container.
The layout looks fine (container extends all the way to the bottom of the
left column) in Opera 7.5 and IE6.
The first fix that I thought of was to use height: 100% on the container
div, but this did not do anything.
I then applied a float to the container div, and this made the container
actually contain both columns. However, doing this made the page not
centered anymore.
Perhaps my question is how to center a float: left.
Too bad there isn't a float: center.
The reason I floated the left column instead of the right column is because
it was desirable to have the unformatted HTML file's 'left column' above
the 'right column'. I also wanted to avoid absolute positioning.
any ideas? Should I compromise and just float the right column, or is
there another answer?
thank you for your time.
d.