center align three divs that is float left without fixed width crossbrowser using css

[xAdrianRonsten]

as the title says, i am wondering and have been since a few hours,
how do i center align three divs that is float left without fixed width crossbrowser using css?

 

[Chris]

As you can see in THIS EXAMPLE, I used relative positioning to center a non-fixed-width div.

The very outer container has a left value of 50%, and the actual container of the three divs has a left value of -50%.
This way, the three divs will always be centered, no matter what their width values are.

 

[jMerliN]

You could also use a flexbox.

 

[Chris]

You could also use a flexbox.

How have I not heard of this?

 

[foxx]

because it's css3 and its support sucks Can I use Flexible Box Layout Module

 

[Selfrot]

Without a fixed width?

You can always do:

<div id="body_expander">[INDENT]<div id="page">[/INDENT]
[INDENT=2]<div class="content">
</div>[/INDENT]
[INDENT]</div>[/INDENT]
</div>

#body_expander {[INDENT]width: 100%;
height: auto;[/INDENT]
}

#page {[INDENT]width: 60%;
height: auto;[/INDENT]
}

.content {[INDENT]width: 100%;
height: auto;[/INDENT]
}

I doubt that you can rule out the Width, since you can't simply: <div align="center">.


Best would be if you paste a snippet of your code and current CSS.


_________
Edit: looks to me like Chris already came up with an answer.

 

[jMerliN]

How have I not heard of this?

Mainly because of too many spec changes + inconsistent implementations. It's much more stable now and finally widely supported. It's also quite epic.