A
Aidan
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>
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>