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 3 of 3
  1. #1
    ACO
    ACO is offline
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adjusting width of a div to the width of its content

    Searching for a way to have a div which has a fixed width of 50px but grows wider if the content of the div is exceeding 50px.

    <div style="width:50px;border:solid 1px red">
    <nobr>long text long text long text long text long text</nobr>
    </div>


    This code works with IE, but not with Mozilla.
    With Mozilla the text overflows the container, but the container itself retains 50px width.
    I need that the div has the same width as the text in it.
    Last edited by ACO; 02-10-2005 at 02:14 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Min-width

    You can control this with the min-width property; IE doesn't support min-width, but incorrectly interprets width as min-width.
    If you place your style rule in an internal or external style sheet (an inline style would get very long and messy), you can use a CSS hack/filter to feed IE a value for the width property, then feed compliant browsers an auto width and a value for min-width.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    ACO
    ACO is offline
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    then feed compliant browsers an auto width and a value for min-width.
    Do you mean:

    div.auto {min-width:50px;width:auto;border:solid 1px red}

    <div class="auto">
    <nobr>long text long text long text long text long text</nobr>
    </div>


    This code makes FireFox always use the whole screen width for my div...
    I'd say it looks the way as if I would define width:100%.
    In other words min-width works fine with FireFoox, but it ignores width:auto and displayes width:100% instead.
    Last edited by ACO; 02-10-2005 at 04:04 PM.


  •  

    Posting Permissions

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