Is it possible to center 2 floating divs?

[12inch]

Is it possible to center 2 floating divs that are nesting within one container div? For example:

body {
text-align: center;
}

div#container {
margin: 0px auto;
}

div#one {
float: left;
}

div#two {
float: left;
}

<div id="container">
<div id="one">text</div>
<div id="one">text</div>
</div>

If a remove the float: left, then the container is centered. But if I add the floating divs, the container floats to the left.

I want to position 2 DIV's next to each other centered IN a container DIV which is also centered. How can this be done?

Anand

[papabaer]

The only way to "see" how floats behave in contained situations is to experiment. You can read all about float behavior at the W3C CSS 2.1 [w3.org ] Do pay close attention to float behavior when it overlaps the borders of its container.

IE has a bug that will allow a float to increase the vertical dimension of a parent div that uses margin: auto;, so be careful when testing and do read the specs. Testing will help you to fully understand the behavior ramnifications however.

Also, try testing your code and varying the margin values. Experiment with percentages and em. See what behaviors result.

Best of luck!

[Nick_W]

Yep, testing is everything!

Seriously, I rarely can remember some of even the better known bugs untill I come to test my code and 'play' with new ideas. You find out so much more with experimentation and you'll very soon begin to get a 'feel' for how it all works...

Nick

[Birdman]

And a good way to really see what's happening is to have a temporary border on the elements in question.

[12inch]

Yes, temporary borders are very handy. I use them all the time.

But, after testing a lot, I still haven't managed to center a floated DIV. I think it isn't possible. I have tried almost everything.

[starsailor]

Does this help?

div#left {
width: 50%;
float: left;
}

div#right {
width: 50%;
float: right;
}

div#one {
float: right;
}

div#two {
float: left;
}

<div id="container">
<div id="left"><div id="one">text</div></div>
<div id="right"><div id="two">text</div></div>
</div>

[papabaer]

Nick and Birdman are right. It is the 'feel' of CSS that is the desired goal of any serious user. When controlling margins, padding and position, CSS is ALL about relationships. Once you 'feel' the relationship in action, you will find yourself capable of exerting greater control.

CSS is not 'theory,' but a very powerful design tool with tremendous potential. And, the potential will only be realized if developers are willing to push beyond perceived limits.