float problems

[yawnmoth]

float, among other css attributes, is not working as i'd expect it to
on the following webpage:

http://www.frostjedi.com/terra/dev/test.html

In Internet Explorer, there's a space between the yellow div and the
light blue div that I don't believe should be there. Also, the red div
has a height that is quite clearly more than the 1px that it should be.

Neither of these problems are present in Firefox, but Firefox's
rendering isn't without flaw, either. Specifically, the yellow div,
and the other divs contained within it, are offset by an amount equal
to the margin-height of the pink div. This seems to be caused by the
fact that the red div (ie. the div immediatly preceeding the pink one)
has a float:left in it. The following page better demonstrates this:

http://www.frostjedi.com/terra/dev/test2.html

Is there anything I can do to make both of these webpages render in the
same manner, while still using floats?

[kchayka]

yawnmoth wrote:

http://www.frostjedi.com/terra/dev/test.html

the red div
has a height that is quite clearly more than the 1px that it should be.
Why do you have a div for this at all? Seems to me a 1px red bottom
border on the blue box would do the job nicely and not cluter up the
HTML with more junk than it really needs. You already have a case of
div-soup started, don't need to make it worse.

BTW, WinIE's default overflow behavior is broken. Instead of confining a
box to its specified dimensions, it automatically expands it to fit the
content. That content size can be affected by other properties, such as
font-size, line-height and default margins.

The typical method to stop this stoopid behavior is overflow:hidden, but
sometimes you need to set the other properties, too. Also beware that
MacIE is rather buggy with overflow.
Firefox's rendering isn't without flaw, either.

http://www.frostjedi.com/terra/dev/test2.html

Is there anything I can do to make both of these webpages render in the
same manner, while still using floats?

I don't know what you are trying to accomplish, so it's hard to suggest
anything. But I will hazard a guess that replacing the 1px red div with
a border and dropping the explicit margins would be a step in the right
direction.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Ali Babba]

yawnmoth wrote:

float, among other css attributes, is not working as i'd expect it to
on the following webpage:

http://www.frostjedi.com/terra/dev/test.html

In Internet Explorer, there's a space between the yellow div and the
light blue div that I don't believe should be there. Also, the red div
has a height that is quite clearly more than the 1px that it should be.

Neither of these problems are present in Firefox, but Firefox's
rendering isn't without flaw, either. Specifically, the yellow div,
and the other divs contained within it, are offset by an amount equal
to the margin-height of the pink div. This seems to be caused by the
fact that the red div (ie. the div immediatly preceeding the pink one)
has a float:left in it. The following page better demonstrates this:

http://www.frostjedi.com/terra/dev/test2.html

Is there anything I can do to make both of these webpages render in the
same manner, while still using floats?

maybe instead of limiting the body size to 600px you could add a div
that wraps around all your complete div-group, like:

body {
background: black;
text-align: center;
}

<div style="display: table; width: 600px; margin-top: 50px; margin-left:
auto; margin-right: auto; border: 2px solid white;">
<!-- your div group here -->
</div>

and like kchaya already said: a div of 1px height looks a little
useless, why dont you simple add a margin-bottom: 1px; on the blue div ?!

finally, i think your page renders in both IE and FF similar when you
would add float: left to the yellow div.

btw .. there are many examples of css-tables on the net, you could do
yourself a favor and have a look at some of them.

gr
martin

[yawnmoth]

Ali Babba wrote:

yawnmoth wrote:

<snip>

and like kchaya already said: a div of 1px height looks a little
useless, why dont you simple add a margin-bottom: 1px; on the blue div ?!

i guess i could do that, heh. i actually only included it because i
was curious why it wasn't working as expected.
finally, i think your page renders in both IE and FF similar when you would add float: left to the yellow div.

that worked - thanks! :)