...

View Full Version : make DIV match inner content width



wac
12-22-2005, 11:04 PM
I have a DIV which encloses a table. I want the DIV's width to be the same as the table (no javascript) without having to set the width of either.
The table takes the natural width of the cell contents (because of the nowrap style??), which is fine.
In IE, using width:0 as a style on the DIV does what I want, but on FF, it does what I say http://www.codingforums.com/images/smilies/redface.gif
:o

I can I get FF to look like IE?

HTML
<div id='mylist_div' class='sas_list_container'
style='height:6em;width:0' >
<table id='mylist' class='sas_list' cellpadding='0' cellspacing='0'
onmouseover='sas_list_onmouseover(event)' >
<tr>
<td id='i1' class='sas_item' >
item 1
</td>
</tr>
<tr>
<td id='i2' class='sas_item' style='background-image:url(../images/Radio.gif)' >
test item 2
</td>
</tr>
<tr>
<td id='i3' class='sas_item' >
my test
</td>
</tr>
<tr>
<td id='i4' class='sas_item' >
sample JSP taglet output
</td>
</tr>
<tr>
<td id='i6' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='sdaf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='adsf' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='4wr' class='sas_item' >
some item
</td>
</tr>
<tr>
<td id='lkj' class='sas_item' >
another item
</td>
</tr>
</table>
</div>

STYLE
.sas_list_container
{
background-color:window;
color: windowtext;
border-style: inset;
border-width: 2px ;
overflow-y:auto;
overflow-x:visible ;
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
}

.sas_list
{
white-space:nowrap;
cursor:pointer ;
cursor:default ;
border-style: solid ;
}

.sas_item, .sas_item_hilite, .sas_item_selected
{
text-indent: 1.2em ;
background-image: url(../images/ListBoxView.gif) ;
background-repeat: no-repeat;
background-position: center left ;
border-style: none ;
border-width: 1px ;
background-color: inherit ;
color: inherit ;
}

_Aerospace_Eng_
12-22-2005, 11:06 PM
Don't set a width, by default a div will expand to fit its container, so in this case the browser, then you can make your table 100% width so it fills up the div.

wac
12-22-2005, 11:10 PM
I don't want the DIV to fill the width of the browser. Eventually, I will specify a width. But when I don't specify a (logical) width, I want the DIV to take on the size of the table, which I want to be as small as possible without the text wrapping.

_Aerospace_Eng_
12-22-2005, 11:30 PM
The the div needs to inside the table somewhere, not the outside. Perhaps a nested table will do the job for you in this case.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum