Adapt width of DIV to content

[freerider2007]

Hi!

I have a HTML table which width will vary (since it's dynamically
built). Above the table I want to align a select box with the table's
right edge.

A simple solution is to add an extra row (and use colspan) and put the
select box there.

Is it possible to solve the problem using a container DIV and CSS?

My idea is to use a container DIV to hold both the select box and the
table. The table will always be wider than the select box. If it is
possible to set the width of the DIV to adapt to the width of the
table, then the problem is solved since it's easy to right align the
input box to the DIV.

Thanks!

[Ben C]

On 2008-07-07, fr***********@hotmail.com <fr***********@hotmail.comwrote:

Hi!

I have a HTML table which width will vary (since it's dynamically
built). Above the table I want to align a select box with the table's
right edge.

A simple solution is to add an extra row (and use colspan) and put the
select box there.

Is it possible to solve the problem using a container DIV and CSS?

You need to give the DIV shrink-to-fit width, which you can get by
giving it display: inline-block, display: table, display: table-cell or
float: left. Float: left is probably the most widely supported.

My idea is to use a container DIV to hold both the select box and the
table. The table will always be wider than the select box. If it is
possible to set the width of the DIV to adapt to the width of the
table, then the problem is solved since it's easy to right align the
input box to the DIV.

Are you putting the select box in the div too? Then you could float the
table to get it to the left of the select. But the select will end up
below the table if there isn't enough horizontal room.

[freerider2007]

You need to give the DIV shrink-to-fit width, which you can get by

giving it display: inline-block, display: table, display: table-cell or
float: left. Float: left is probably the most widely supported.

This worked just fine in FF but not in IE7 (both Windows). Is it
possible to get it to work in most browsers?

Are you putting the select box in the div too? Then you could float the
table to get it to the left of the select. But the select will end up
below the table if there isn't enough horizontal room.

The select box is above the table inside the same container div.

[freerider2007]

Another problem is that the div should be horizontally centered on the
page. I use margin-left: auto; margin-right: auto; to accomplish that
but adding the rules you suggested makes the div left aligned.

[Ben C]

On 2008-07-07, fr***********@hotmail.com <fr***********@hotmail.comwrote:

Another problem is that the div should be horizontally centered on the
page. I use margin-left: auto; margin-right: auto; to accomplish that
but adding the rules you suggested makes the div left aligned.

You're out of luck then-- you can't centre a float and IE doesn't
support display: table.

See also:

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

dorayme may have a more up-to-date URL, I thought I remembered seeing
more about centring somewhere. Anyway that URL still works.

[Ben C]

On 2008-07-07, fr***********@hotmail.com <fr***********@hotmail.comwrote:

>You need to give the DIV shrink-to-fit width, which you can get by
giving it display: inline-block, display: table, display: table-cell or
float: left. Float: left is probably the most widely supported.

This worked just fine in FF but not in IE7 (both Windows). Is it
possible to get it to work in most browsers?

I thought IE7 did support float up to a point, but I can't really help
you as I'm not familiar with many of its bugs and quirks.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-07-07, fr***********@hotmail.com <fr***********@hotmail.comwrote:

Another problem is that the div should be horizontally centered on the
page. I use margin-left: auto; margin-right: auto; to accomplish that
but adding the rules you suggested makes the div left aligned.

You're out of luck then-- you can't centre a float and IE doesn't
support display: table.

See also:

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

dorayme may have a more up-to-date URL, I thought I remembered seeing
more about centring somewhere. Anyway that URL still works.

Yes, I won't move that one. It is just that it is also nearly identical
to page 4 of another more comprehensive piece I made on centring:

<http://netweaver.com.au/centring/>

--
dorayme