Eyes on Final Fantasy Forums > Reference > Help Forum > CSS question (problem)

[Samuraid]

Hello EoFF CSS gurus,
Perhaps you can help me understand what I'm doing incorrectly here.

Here's a simple HTML page that outlines the problem. Check out the source code specifically.

I need to know why the <div> tags are behaving this way with this CSS.

Thanks a bunch for any insight you can provide!

[Balzac]

The div tags aren't working right because you have the "float" command in them.

As for your other problem, I have no idea.

[Samuraid]

Problem #1 is solved. A web-developer friend pointed out that adding this before closing the blue div would solve the problem:

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

The second problem he said was a padding issue. I'm still a bit unsure on that one.

EDIT: Problem #2 solved by trial and error. It's not a padding issue. Instead, turning off the borders on the red and green divs fixes the problem.

I guess that about wraps that up. Thanks for the suggestions.
I'll leave this open if anyone has anything to add.

[o_O]

Ok, for problem one:
When the height of the parent div is evaluated, it takes into consideration the height/content of any child element in the normal flow of the page. Since floated elements are removed from the normal flow to allow other content to flow around them, the div disregards their heights, even though they are its children. My solution is either to not float one of the child divs, leaving it in the normal flow and forcing the parent div to stretch to its height, or adding a non-floated block element inside the parent div with the "clear" attribute.

And for problem two:
I'm fairly certain this has to do with the way IE and Firefox interpret the "width" attribute of block elements. For clarity's sake I'll just point out that a block element is always rendered with a line break immediately following unless the CSS "display: inline;" is explicitly used.
Anyway, with block elements, IE considers the width property to include the internal space of the element (i.e. the screen space taken up by the block's content) as well as the external space taken up by margins, padding, spacing and borders. In Firefox, these four attributes are not included in the "width" of the element (and this is the correct way ).
Upon closer inspection, you'll notice that there's a four-pixel overlap in firefox, and with one-pixel borders.... So my solution in this case is to set the width of one or both child divs to 49%, which produces (almost) no discernable difference between IE and Firefox.

[Yamaneko]

Get a room!

[Samuraid]

Originally Posted by o_O ^

Ok, for problem one:
When the height of the parent div is evaluated, it takes into consideration the height/content of any child element in the normal flow of the page. Since floated elements are removed from the normal flow to allow other content to flow around them, the div disregards their heights, even though they are its children. My solution is either to not float one of the child divs, leaving it in the normal flow and forcing the parent div to stretch to its height, or adding a non-floated block element inside the parent div with the "clear" attribute.

And for problem two:
I'm fairly certain this has to do with the way IE and Firefox interpret the "width" attribute of block elements. For clarity's sake I'll just point out that a block element is always rendered with a line break immediately following unless the CSS "display: inline;" is explicitly used.
Anyway, with block elements, IE considers the width property to include the internal space of the element (i.e. the screen space taken up by the block's content) as well as the external space taken up by margins, padding, spacing and borders. In Firefox, these four attributes are not included in the "width" of the element (and this is the correct way ).
Upon closer inspection, you'll notice that there's a four-pixel overlap in firefox, and with one-pixel borders.... So my solution in this case is to set the width of one or both child divs to 49%, which produces (almost) no discernable difference between IE and Firefox.

Hats off to you, good sir. You made the solution make sense.