Center 2 or more floating divs within another div

[skube]

I'm trying to horizontally center floating divs within another containing div. There has been some discussion of this in previous posts, but neither seem to resolve the question.

Is it possible to center two or more floating divs within a container div?

Related threads:
[webmasterworld.com...]
[webmasterworld.com...]

I'm thinking something like should work, but it doesn't:

<style>
.fixedwidth {width:400px;}
.floatcontainer {margin:0 auto;}
.floater { float:left;}
</style>

<div class="fixedwidth">
<div class="floatcontainer">
<div class="floater">one</div>
<div class="floater">two</div>
<div class="floater">three</div>
</div>
</div>

Any suggestions?

[Reflection]

The browser cant center anything without first knowing what the width of the element is. So the auto margin on your float container will not work without a width.

Rather than floating all your divs it would work better if you positioned them. I assume you are floating them so that they all align vertically? If so try postioning them absolutely and give them all the same top value.

[skube]

So, if I'm understanding you correctly, there is no way to center a div whose width is not explicitly defined (or is variable)?

Also, positioning divs makes them less dynamic and is more troublesome to update. Isn't that part of what css is all about? This is just a simple example of a more complex situation.

[Reflection]

How do you determine where to center something if you dont know how wide it is? You can by defining left and right margins(use equal percentages) but the browser cant do it automatically ((margin:0 auto;}) without knowing the width.

Also, positioning divs makes them less dynamic and is more troublesome to update. Isn't that part of what css is all about? This is just a simple example of a more complex situation.

It depends on the situation but given your example I assumed that you were floating the divs in order for the to be side by side and aligned vertically. Rather than floating them you can position them absolutely and by having them in a container div the absolute coordinate of (0,0) will be the top left corner of the container div.

So your 3 divs would be something like:

.floater{position:absolute; top:0;}
#one {left:0;}
#two {left:33%;}
#three {left:66%}

<div class="floatcontainer">
<div class="floater" id="one">one</div>
<div class="floater" id="two">two</div>
<div class="floater" id="three">three</div>
</div>

Anyway thats the idea but not sure if it fits your situation.

Oh and Welcome to Webmasterworld :)

[DevilBear]

How do you determine where to center something if you dont know how wide it is?

Browsers manage to do it with tables.