DIV width problem!

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>
 
B

brucie

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

Aidan

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.
 
L

Leif K-Brooks

brucie said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top