...

View Full Version : How to stop a div wrapping under another?



gavinhanly
05-12-2009, 01:55 PM
On the breadcrumb on this page:

http://www.hot-dinners.com/The-City/whitechapel-gallery-dining-room

"room" wraps underneath the "you are on" section. I don't mind it wrapping, but I would rather "room" aligned underneath "home" (i.e. so nothing wraps under "You are currently on".

The HTML is:


<div id="breadCrumb">
<div id="current">You are currently on:&nbsp;</div>
<div><jdoc:include type="modules" name="breadcrumb" /></div>
</div>

The only CSS I'm using is:


#current {
position: relative;
float:left;}

Any ideas on what I need to do would be really helpful!

abduraooft
05-12-2009, 02:08 PM
How about

#breadCrumb {/*main.css (line 114)*/
color:#707070;
float:left;
font-size:11px;
width:auto;
}

And you may add white-space:nowrap; to avoid the wrap in any case.

gavinhanly
05-12-2009, 02:23 PM
Alas, the nowrap command could cause issues for longer names, and the width=auto means the entire restaurant name wraps underneath the "You are currently on" section. Thanks anyway, though.

I know I could resolve this with a table, but I'm guessing that should be my last resort?

abduraooft
05-12-2009, 02:32 PM
Then give some breathing space, more than 50%. like

#breadCrumb {/*main.css (line 114)*/
color:#707070;
float:left;
font-size:11px;
width:65%;
}
#mod_search_searchword {/*main.css (line 266)*/
width:130px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum