DIV width problem!

Discussion in 'Javascript' 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

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:
    785
    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:
    531
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,927
    Steve Richter
    Jun 15, 2007
  4. tomek milewski
    Replies:
    6
    Views:
    1,309
    tomek milewski
    Jun 25, 2007
  5. K Viltersten

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

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

Share This Page