Question

Is there any way I can force a floated div to shrink instead of going to a new line?

I know I can set implicit widths on the divs but it’s on a menu which might have variable amounts of items in it. I’m trying to do this while keeping the site’s layout fluid if possible.

#left {
  float: left;
  border: 1px solid #000;
}

#right {
  float: right;
  border: 1px solid #000;
}

<div id="left">
  <p>This div represents the logo</p>
</div>
<div id="right">
  <p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
  </p>
</div>

Basically, I want #right to begin shrinking when the browser window is shrunk rather than having it drop a line first, then shrink when the window is further resized.

Answer 1

Have you tried experimenting with giving these two divs relative (such as a percentage) widths?

When you float without explicitly declaring a width, either fixed or relative, the dimensions will default to ‘auto’. Auto will force the div to be the width of it’s content. When the browser shrinks, the content will still force these boxes to that width, until it is forced to collapse by touching another element.

Using auto widths is not the best way to achieve fluidity in your layout. You’ll need to specify some kind of relative dimension somewhere, otherwise this problem will be entirely unavoidable.

There are lots of resources out there which can help you achieve a more fluid layout (a lot of articles on http://www.alistapart.com discuss this in quite some depth).