#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    1
    Rep Power
    0

    CSS DIV width problems


    Hope someone can help with this i've set this code below

    <table width="160">
    <tr>
    <td><div class="mystyle">some text here</div></td>
    </tr>
    <tr><td>...some other stuff...</td></tr>
    </table>

    The div style sets padding, background colour, font colour and a background image that's aligned to the right hand side;

    .mystyle {
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    background: #003366;
    padding: 6px;
    white-space: nowrap;
    }

    The problem is that the div fills the <td>'s 160px width rather than constraining itself to the with of its content, i've tried adding a minimum width of say 10px which seems to work in IE on PC but nothing else. How can i get it to reliably follow the widths of the content and padding??
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Can't test this, but what about trying this:
    Code:
      <tr>
        <td class="mystyle">some text here</td>
        </tr>
    Last edited by jabba_29; March 5th, 2004 at 07:15 AM. Reason: tidy up :)

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    div is a block element. By default, it fills the width available in its containing element. IE and Opera will incorrectly "shrink-wrap" certain block elements. In your case, use an inline element rather than block, eg.
    Code:
    <td><span class="mystyle">some text</span></td>
    cheers,

    gary
    Last edited by kk5st; March 5th, 2004 at 03:31 PM. Reason: brackle fritzin' typos
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo