Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > DIV width problem!

Reply
Thread Tools

DIV width problem!

 
 
Aidan
Guest
Posts: n/a
 
      10-22-2004
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>





 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      10-22-2004
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
 
Reply With Quote
 
 
 
 
Aidan
Guest
Posts: n/a
 
      10-22-2004
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" <****@usenetshit.info> wrote in message
news:(E-Mail Removed)...
> 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




 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-22-2004
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
 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      10-22-2004
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.
 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-22-2004
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
two div in one line, first div's width is const and the second isn't tomek milewski HTML 6 06-25-2007 09:28 PM
set div width to remaining width of the browser Steve Richter ASP .Net 2 06-15-2007 06:40 PM
how to: div width = browser.width? =?Utf-8?B?cm9kY2hhcg==?= ASP .Net 3 10-30-2006 05:43 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM



Advertisments