IE vs Firefox behavior with floats

Trying to have one div centered, other one floated

[marty3d]

Hi!

I have two divs within a container div. The left div should be centered in the container, while the right div is supposed to be floated right, pushing the left to the left but still being centered within it's own space. A bit hard to explain, but I'll try som ascii :)

This is how it looks like in IE, and it's the correct one:
------------------
______ ____
¦_____¦¦____¦
------------------
In Firefox, the result is like this (the two boxes overlapping while left div still centered but to the container):

------------------
------------
¦ ¦¦ ¦
------------
------------------
Any tips on how to solve this?

CSS:

#container{
display:block;
border:1px solid #000000;
width:600px;
min-height:100px;
}
#container:after{display:block;
 content: ".";
 height:0;
 clear:both;
 visibility:hidden;
 }
#centered{
float:none;
border:1px solid #FF0000;
display:block;
width:400px;
margin:4px auto;
}
#floated{
float:right;
border:1px solid #00FF00;
display:block;
margin:4px;
width:150px;
}

HTML:

<div id="container">
 <div id="floated">
 <p>This should be floated to the right</p>
 </div>
 <div id="centered">
 <p>this should be centered</p>
 </div>
</div>

EDIT: The ASCII art didn't work here because the board stripped my spaces :(

[marty3d]

I don't know if this is allowed, I'm sorry if it's not.

anyway, to see an example of above post, go to my profile and continue through the homepage link. There, click on "Kontakt"

Thanks alot for your help! This board is great!

/Martin

[marty3d]

*bumbp

[createErrorMsg]

Here's why your divs overlap...once an element is floated, it is removed from the flow. That means other elements have very limited interaction with it. In fact, the only interaction you can have with a float (in a compliant browser) is that inline text boxes will wrap around it. Otherwise, elements act as if the float where not there, including adjacent, non-floating divs.

In other words, there is nothing limiting the space your left div centers in, and so it is centering in the full width of the container.

Maybe some specifics based on the code you posted above will help...

Your container is 600px wide.
Your left div is 400px wide, which, when centered in a 600px wide space leaves 100px on either side.
Your right float is 150px wide.
Since the left div doesn't know the right div is there (it's no longer in the flow!), the left div still centers in the 600px wide container.
Result? The right float overlaps the left div by 50px.

What you actually need is to center the left div in a 450px wide space that remains after the 150px right column is subtracted from it.

To do this, you'll need to define a secondary container div for the left column...

html
<div id="container">
<div id="floated"></div>
<div id="second_container">
<div id="centered"></div>
</div>
</div>

css:
#second_container {
float:right;
width: 445px;
}

or

#second_container {
float:left;
width: 445px;
}

or

#second_container {
width: 450px;
}

The last one would be best, since fewer floats = fewer complications, but it may not work. Try it and see. If it doesn't do it, I would go for the right float option over left, simply because it keeps all your floating in the same direction, making clearing alot easier to keep track of. If you have to float #second_container you'll need to make sure to do two things.

(1) Make sure the combined widths of the second_container and floated divs equal slightly less than the full width of the container (ie has a rounding bug that can break your layout if there isn't any wiggle room).

(2) Make sure you either add a float value to the container or us e a clearing element. If both elements in the container are floated, compliant browsers will snap the container shut and any borders/backgrounds/ect in that container will disappear. This goes back to my earlier comments about floats being out of the flow. If all the children of a container are floated, the container doesn't know there is anything in it and closes up to 0 height. FLoating the container prevents this in compliant browsers.

Good luck,
cEM