views:

3929

answers:

5

Hey, 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.

So 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?

example: what I want:

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

+10  A: 

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.

Eric Wendelin
solved the problem and works for height too!
Jiaaro
Yep. As intended :)
Eric Wendelin
+2  A: 

Are you sure that floated block-level elements are the best solution to this problem?

Often with CSS difficulties in my experience it turns out that the reason I can't see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup ( thinking "how can I make these elements do this?" ) rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that.

glenatron
well it works for just about everything and the existing layout is based on it, I'm just trying to fix a problem with the layout breaking when you increase the text size too much OR resize the browser window smaller than 700px wide
Jiaaro
+1  A: 

Another option: Do not float your right column; just give it a left margin to move it beyond the float. You'll need a hack or two to fix IE6, but that's the basic idea.

mrclay
A: 
pkario
A: 

i'd recommend using tables for this problem. i'm having a similar issue and as long as the table is just used to display some data and not for the main page layout it is fine.

Rob Elliott