csscss-floatcss-tablesstretching

How do I keep CSS floats in one line?

I want to have two items on the same line using float: left for the item on the left.

I have no problems achieving this alone. The problem is, I want the two items to stay on the same line even when you resize the browser very small. You know... like how it was with tables.

The goal is to keep the item on the right from wrapping no matter what.

How to I tell the browser using CSS that I would rather stretch the containing div than wrap it so the the float: right; div is below the float: left; div?

what I want:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
Solution

  • Wrap your floating <div>s in a container <div> that uses this cross-browser min-width hack:

    .minwidth { min-width:100px; width: auto !important; width: 100px; }

    You may also need to set "overflow" but probably not.

    This works because: