Floats, Firefox, and overflow

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.

Hey,
What i do i use a 1 px horizontal background line picture for a whole
content div.
Something like that:
div.centered { width: 780px; margin:0 auto 0 auto;
background-image:url(../../G/layout/background_centered.gif);background-repeat:y;}You
can see the results on http://ksi.mikronika.com.pl:88/mikronika/Hope it will
help,Luke"Drue" <xrintrahx@(nospam)yehoo.com> wrote

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.

Drue <xrintrahx@(nospam)yehoo.com> wrote

http://www.splatteredink.net/test/

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.

I don't know of anything in any CSS spec that would suggest that such
behavior is correct. I'm not surprised IE/Windows is doing it
(probably thanks to #cont { width: 700px; }, which switches IE/Windows
into using its second type of block), but I'm a little surprised about
Opera.

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.

This works because, in CSS 2.1 terminology, a float is one of the
things that establishes a new block formatting context, and the
definition of 'height: auto' (the default) for such elements means
they grow to contain floats.

any ideas? Should I compromise and just float the right column, or is
there another answer?

Another answer would be the rule:

#cont:after {
display: block;
content: " ";
clear: both;
}

-David

--
L. David Baron <URL: http://dbaron.org/

in comp.infosystems.www.authoring.stylesheets, L. David Baron wrote:

Drue <xrintrahx@(nospam)yehoo.com> wrote in message news:

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.

I don't know of anything in any CSS spec that would suggest that such
behavior is correct.
I'm a little surprised about Opera.

Quirks mode. Anyway, now it trickers standards mode in my 7.6p3, and does
show things correctly (like FF).

It trickers quirks in IE, I assume, because doctype has extra whitespace,

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.

It is undefined, is could just as well not contain them...

any ideas? Should I compromise and just float the right column, or is
there another answer?

#cont {display:table;}

Another answer would be the rule:

#cont:after {
display: block;
content: " ";
clear: both;
}

Does it work on Gecko? It has worked on Opera for few years...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

in comp.infosystems.www.authoring.stylesheets, Luke wrote:

Hey,

You top posting. As usual, it means you didn't read OPs post.

What i do i use a 1 px horizontal background line picture for a whole
content div.

OP is asking different question, and your solution is not suitable for
that. His problem was that content div was not long enaugh, not that
column was too short.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote

in comp.infosystems.www.authoring.stylesheets, L. David Baron wrote:
Another answer would be the rule:

#cont:after {
display: block;
content: " ";
clear: both;
}

Does it work on Gecko? It has worked on Opera for few years...

Yes. It works in both current trunk and in 0.9.9 (the oldest version
I have around, from March 2002).

-David

--
L. David Baron <URL: http://dbaron.org/ >

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> wrote in
news:MPG.1c0e951e2864317e98a1a7 (AT) news (DOT) individual.net:

#cont {display:table;}

Thank you both for your suggestions. Both bits of code fixed the float
problem, however I ultimately went with L. David Baron's suggestion. The
above code, once applied to another page, did strange things to div and p
background images.

Thanks again.

d.