Posted by Mr Perplexed on 11/25/05 20:34

Hi,

I want to create a box containing some content on my web page. I do not
want the box to be the full width of the page but neither do I want to
specify the width of the box (in ems or pixels or percentage). Instead
I want the box to grow to fit the width of the content. I also want the
box to be centered.

If I use a div and leave the width undefined or set it to auto, the div
expands to the full width of its containing element - the page. To make
the div less than the full page width I have to set an width in pixels
or %, which means the div width does not flow tightly round its
content.

If I float the div (float:left), ta-daam, it now magically sets its
width correctly (according to its content), but now it's a pain in the
arse to center it. I also have to add an element below it to clear the
float. Similarly, setting position:absolute makes the width fluid but
destroys the layout of the rest of the page.

So I'm stumped. The solution I am using at the moment is a <gasp> one
cell table wrapped around my content box div. Setting the table style
to margin:0 auto means the table gets centered on the page, and because
it's a table (now I remember why we loved these things) it wraps itself
fluidly around whatever content it contains. But obviously tables are
evil and must be banished, so if anyone has any alternative ideas I'd
love to hear them.

Thanks

[Back to original message]