Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    make DIV match inner content width

    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


    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;
    cursorointer ;
    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 ;
    }
    Wayne Christian

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Wayne Christian

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •