DIV width problem!

Discussion in 'HTML' started by Aidan, Oct 22, 2004.

  1. Aidan

    Aidan Guest

    Problem:
    I am trying to build a menu and I need the width of a DIV to adjust to fit
    the content without wrapping the content. The content consists of text (the
    menu item) and an image (arrow for sub-menu). I want the images to line up
    on the right-hand side of the DIV. I do not want to use tables. If I do not
    set a DIV width the DIV expands to take up the entire width of the screen.
    If I set the width as 0 the DIV will expand but the image will wrap onto a
    different line if I try to right align it.

    My only solution so far seems very inefficient to me (see simplified example
    below). I put the image and text into NOBR tags and do not set the align on
    the image because it will expand the NOBR to the screen width. Then I run a
    script after loading to determine the widest item and set the DIV and all
    the NOBRs to that width and then right align the images. I'm thinking there
    has got to be a simpler and better way to do this, hopefully without having
    to run a script. Does anyone have any suggestions?

    <html>
    <head>
    <script>
    function setwidth() {
    var menuWidth = 0;
    for (var i = 1; i < 3; i++)
    if (menuWidth < document.getElementById("nb" + i).offsetWidth)
    menuWidth = document.getElementById("nb" + i).offsetWidth;
    document.getElementById("d").style.width = menuWidth;
    for (var i = 1; i < 3; i++) {
    document.getElementById("nb" + i).style.width = menuWidth;
    document.getElementById("i" + i).align = 'right';
    }
    }
    </script>
    </head>

    <body onload="setwidth()">
    <div id='d' style="background-color:gray;">
    <nobr id='nb1' style="background-color:blue;">
    <img id='i1' src="test.gif" class="arrow"> test test
    </nobr><br>
    <nobr id='nb2' style="background-color:blue;">
    <img id='i2' src="test.gif" class="arrow"> test test test
    </nobr>
    </div>
    </body>
    </html>
    Aidan, Oct 22, 2004
    #1
    1. Advertising

  2. Aidan

    brucie Guest

    In alt.html Aidan said:

    > I am trying to build a menu and I need the width of a DIV to adjust to fit
    > the content without wrapping the content.


    make the <div> a little bigger than the width of the text you don't want
    to wrap:

    div{width:20ex;}

    using 'ex' the <div> will expand/contract with font size changes so the
    text doesn't wrap. you may also like to try 'em' but IMO you get better
    results xbrowser with 'ex'.

    > The content consists of text (the menu item) and an image (arrow for
    > sub-menu). I want the images to line up on the right-hand side of the
    > DIV.


    <looks around for URL/>

    --


    v o i c e s
    brucie, Oct 22, 2004
    #2
    1. Advertising

  3. Aidan

    Aidan Guest

    Thanks for the suggestion but I cannot use this approach because I do not
    know what the width of the content will be. I want a generic approach so
    that all my menus will adjust to the optimal size, I do not want to hardcode
    a width value.

    "brucie" <> wrote in message
    news:...
    > In alt.html Aidan said:
    >
    > > I am trying to build a menu and I need the width of a DIV to adjust to

    fit
    > > the content without wrapping the content.

    >
    > make the <div> a little bigger than the width of the text you don't want
    > to wrap:
    >
    > div{width:20ex;}
    >
    > using 'ex' the <div> will expand/contract with font size changes so the
    > text doesn't wrap. you may also like to try 'em' but IMO you get better
    > results xbrowser with 'ex'.
    >
    > > The content consists of text (the menu item) and an image (arrow for
    > > sub-menu). I want the images to line up on the right-hand side of the
    > > DIV.

    >
    > <looks around for URL/>
    >
    > --
    >
    >
    > v o i c e s
    Aidan, Oct 22, 2004
    #3
  4. Aidan

    brucie Guest

    In alt.html Aidan said:

    > Thanks for the suggestion


    you're welcome

    please don't toppost, it upsets the little voices.

    How am I supposed to post my replies in a newsgroup?:
    http://allmyfaqs.com/faq.pl?How_to_post


    --


    v o i c e s
    brucie, Oct 22, 2004
    #4
  5. brucie wrote:
    > using 'ex' the <div> will expand/contract with font size changes so the
    > text doesn't wrap. you may also like to try 'em' but IMO you get better
    > results xbrowser with 'ex'.


    Apparently, today's my "disagree with Brucie day". As far as I can tell,
    the ex unit has many more implementation problems than em does in most
    of today's browsers. The CSS standard says that it should be the height
    of the letter 'x', but most browsers incorrectly implement it as half of
    an em. Opera implements it according to the standards, which is a Good
    Thing, but that will make pages using the ex unit render differently
    than in other browsers.
    Leif K-Brooks, Oct 22, 2004
    #5
  6. Aidan

    brucie Guest

    In alt.html Leif K-Brooks said:

    > Apparently, today's my "disagree with Brucie day".


    you supply the kiddies pool and i'll get the jelly.

    --


    v o i c e s
    brucie, Oct 23, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    772
    Bruce Barker
    Oct 10, 2005
  2. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    525
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,912
    Steve Richter
    Jun 15, 2007
  4. tomek milewski
    Replies:
    6
    Views:
    1,306
    tomek milewski
    Jun 25, 2007
  5. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    745
Loading...

Share This Page