50% float 'wraps' in IE6 but not Firefox

cannot find the reason

[Darkelve]

I am trying to create a page layout using 'pure' Xhtml+CSS. I gave each DIV a different background color to better see what's up with it.

Doctype given is: XHTML 1.0 Transitional

I gave the DIV's 'input field' and 'mission' both a value of 50%. However when you view this in IE7 (sorry I made a mistake in the title; the rendering engine is IE7), the 'mission' DIV 'wraps' under the 'inputfields' DIV (on a 'new line').

I want the 'input field' and 'mission' DIV's to stay next to each other and aligned (they are two adjacent boxes for page content and each should be half as big as the containing DIV 'planner-area').

I could 'fix' this by making one of the two 49%, but then there is a 'margin' (or padding?) at the right of the 'mission' DIV as you can see by the green (teal) background of the 'planner-area' DIV showing through.

Below is the code, I did read the rules but I think this is pretty short and I deleted the unnecessary values (font, color etc.)

How can I fix this and what is the explanation for this behavior?

Darkelve

CSS code:

#container {
margin-left: 22px;
margin-right: 22px;
background-color: yellow;
}
#header-area {
background: maroon;
height: 90px /* temporary'placeholder' value */ ;
}
#planner-area {
float: left;
width: 100%;
clear: both;
background: teal; 
}
#inputfields {
float: left;
width: 50%;
}
#banner-and-text
{ 
background: red; 
}
#mission {
float: left;
width: 50%;
background: blue;
}
#three-cols-area {
background: olive;
}

HTML code:

<div id="container">
Container
 <div id="header-area">
 Header Area
 </div>
 <div id="planner-area">
 
 <div id="inputfields">
 <div id="banner-and-text">Input Fields</div>
 </div>
 <div id="mission">
 Mission
 </div>
 </div>
 <div id="three-cols-area">
 3 Columns Area
 </div>
</div>

[edited by: Darkelve at 11:02 am (utc) on June 2, 2008]

[swa66]

Math in browsers is tricky (and IE is notoriously bad at it).
Let's assume your parent is 1001 pixels wide, 50% of that is ... 500 or 501 pixels ? You can't render half pixels (well you can but you won't like the results either).
- if the browser chooses 501: two of those won't fit in 1001.
- if the browser chooses 500: two of those will leave a 1 pix gap.

So what's the solution:
only float one of them, let the other sit next to it and occupy the remaining space, then it doesn't matter all that much how many pixels the math if off.

Go with the flow. ;-)

[Darkelve]

What do you mean 'only float one of them and let the other sit next to it?' ... they're both block-level elements, so they will display beneath each other, unless I change the display mode to inline... or am I missing something?

Edit: well, I played around some more and I found a solution like what you are suggesting, but it only works when I give an explicit height to the DIVs.

[edited by: Darkelve at 12:24 pm (utc) on June 2, 2008]

[Old_Honky]

Why not just float the mission div right?

[Darkelve]

"Why not just float the mission div right?"

Well I suppose I could do that, it's just a big banner (image) with a mission statement on the right.

[poppyrich]

There is a handy little roundup of how different browsers go about the problem of rounding floats before one of the floats gets "squeezed out" and displays sequentially.

script guru John Ressig's blog - search:
sub-pixel-problems-in-css/