Floating problem w/ opposing floats in a list

right side is nowrapped left side has a breadcrumb

[Clark]

I'm finally beginning to get the hang of CSS but the learning curve is far worse than I thought. So now I've got a float problem. Here my layout:

left side (breadcrumb)
----------------------
Home > location > loc2 > destination which can contain short or long strings

right side
-----------
Welcome $username ¦ My Balance ¦ My Account ¦ Logout

When the width of the line can contain both elements, then no problem. But when the last element in the breadcrumb is too wide, then instead of the container of the breadcrumb extending it's height, the whole box just moves down one row...if you know what I mean...

In other words, instead of the left showing two lines like so:
===========
(line 1) Home > location > loc2 > destination which can
(line 2) contain short or long strings
===========
The whole thing is shown in one line, but it leaves an empty row like so:
=================
(line 1)
(line 2) Home > location > loc2 > destination which can contain short or long strings
==============

Here's the code....

Code
-----

<div id="bar">
<ul>
 <li>Welcome $username</li>
 <li>My Balance</li>
 <li>My Account</li>
 <li>Logout</li>
</ul>
<p>Home > location > loc2 > destination which can contain short or long strings</p>
</div>

CSS
---

#bar 
{
 margin:0px;
 float:left;
}
#bar ul
{
 padding: 3px 6px;
 margin:0px;
 list-style: none;
 display:inline;
 float:right;
 clear:right;
}
#bar li
{
 display:inline;
 padding:0px 4px;
 border-left: 1px solid #000;
}
#bar li.first
{
 border-left: none;
}
#bar p
{
 margin:0;
 padding:3px 0 3px 30px;
 background: url(images/file.gif) no-repeat 15px 50%;
 float:left;
}

[Marshall]

Clark,

If you [b]do not[/i] have a fixed width on the #bar, it is just going to stretch to fit its content. So, when you have two <div> side by side, the one that falls first in the html will become dominant and push the other one down. You could also use a max-width, but that is not fully supported.

The other choice is define a width in % or em's to the two side by side <div>, making sure they do not exceed 100% combined plus any margins, borders, etc., say making each 48% wide as an example.

Of course, this all assumes I am understanding your problem correctly :)

Marshall

[Clark]

You are and thank you. That makes sense. I'm trying to make it a fluid or elastic layout but this is my first time totally laying it out in css, so it is a challenge...

I'd love to use percentages. But essentially, I'd like the right side not to wrap as it will never be too big, but I do want the left side to wrap. I've made the text resizable and have a style switcher for larger letters. Using the keyword font sizes (e.g. xx-small,large)...

So I can't define a fixed width on either side. But how can I be sure the width on the right is enough? What is the best practice on all this?

[Marshall]

You do not have to split the space 50/50. You can try 70/30 let's say, in em's. The problem will always be the variable of the #bar width. There is another option that may work for you though.

CSS

#wrapper {
width: 100%;
}
#wrapper p {
text-align: left; /* probably not necessary */
}
#bar {
width: 30em; /* or make it fixed if you know the width is constant */
float: right;
margin-left: 2em; /* ensures the text rom the breadcrumbs won't butt up against it */
}

HTML
<div id="wrapper">
<div id="bar">
Welcome $username ¦ My Balance ¦ My Account ¦ Logout
</div>
<p>Home > location > loc2 > destination which can contain short or long strings </p>
</div>

Think of it as floating an image to the right of a paragraph.

Marshall

[Clark]

I'm kind of new to the "em" sizes. Trying to read up but from the first couple of articles I'm confused. Sounds like an em is like the height (width) of a font? So do I make the width = the maximum amount of text I expect in the box?

[Marshall]

1em = 100% in font height or line height. 1em = 1% in width. If it is simpler, just use %. I generally do for width and height and em's strictly for font. I just suggest being uniform when possible.

Marsahll

[Clark]

It seemed to have worked! Although I'll have to watch out for different resolutions and long usernames to get the width right. Too bad there doesn't seem to be a bulletproof way to not force us to specify a width.

[Marshall]

With the second solution I gave you, you may be able to get away with not using a width specification by adding white-space:nowrap; to the #bar, but I make no promises :)

Marshall

[Clark]

Haha, well I won't chance it then. It seems to work very well no matter how much I squeeze the width. Kudos!