Posted by Chris Beall on 11/26/05 04:31

Mr Perplexed wrote:
> 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
>
Mr. P,

Try <div style="display: table">

Chris Beall

[Back to original message]