[stickmus]

I've been trying to get this to work for a while, but with no results.

http://www.mistercut.com/test/ferrara/index.html

http://www.mistercut.com/test/ferrara/ferrara.css


What it does is great: the div only expands when there's enough room for the next float.

But ideally I would like it centered on the page too.

Any suggestions?

I've tried putting it in a container div, but wasn't sure what styles might make it work.

[adras]

add this to the container div

margin: auto;

that's should center it..

[stickmus]

Originally Posted by adras

add this to the container div

margin: auto;

that's should center it..

Yeah I tried that.

Should but doesn't as you can see.

[Bill Posters]

body {
text-align: center; /* needed for certain non-compliant browsers */
…
}

#container {
margin: 0 auto; /* used for compliant browsers */
width: ??px; /* you need to declare a width */
text-align: left; /* resets the text-alignment after the earlier workaround */
…
}

Without a width the container div will simply use its default width which is 100% of its parent element, in this case, the html/window.
The width of the container needs to be less than that of the window as you can't center something that already fills the available space.

[stickmus]

That nearly works...but:

If you use a small width, then the auto-wrapping doesn't work. And if you use a big one (oo-er) it's only centered at the point where it wraps.

Arrgh!

[Bill Posters]

*ahem*

Originally Posted by my example

…container {
margin: 0 auto;
text-align: left;
…
}

Originally Posted by your current markup

…container {
margin: auto;
text-align: center;
…
}

[stickmus]

Okay, but that doesn't make a difference. (not even in ie5).

[stickmus]

Any more for any more?

I've simplified it all down at:
http://www.mistercut.com/test/floatbox.html

Thanks