How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

views:

answers:

+2 Q:

How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.

The two columns do not need to be equal in height.

Additionally, I would like to create a 5px gap between the edges of the two boxes.

Is this layout possible without using a table?

EDIT:

Here's a table version to show you the kind of behavior I'm looking for.

+1 A:

Yes it is! You can float the first column left, and play with margins to create your gap.

greg0ire 2010-07-24 09:59:53

That almost works, but if the shrink-to-fit column is to short, the first will wrap under. Also. both columns have borders

Eric 2010-07-24 10:09:39

Without knowing the width, I don't see how... unless you use javascript to set the right div margin by using the left div width + 5px

greg0ire 2010-07-24 10:27:49

+1 A:

http://innonesen.se/test/l-41-mod/

Ths should do it ( tested only on IE6 and Opera ). Additional feature exist that the main container will stop expanding , when sidebar is less then 100px wide .

http://innonesen.se/test/l-41-mod/no-right.html

P.S. sorry , i cant past URLs .. my rep is too low.

mefisto 2010-07-24 10:49:29

That seems to work. Although I had to remove the fixed-width on the `.layout` div.

Eric 2010-07-24 12:03:31

So basically, you're using `display: table-cell`?

Eric 2010-07-24 12:09:36

yes , i am. It's there to simulate IE's rendering (IIRC .. its an old test-case) , when hasLayout is not set.And the fixed width was only for decoration .. otherwise it looked "broken".

mefisto 2010-07-24 12:34:42

Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.

The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.

Pat 2010-07-24 10:55:21

Unfortunately, neither column is fixed width. The width is created by shrink-wrapping

Eric 2010-07-24 11:10:46

+2 A:

I think one of my answers on another question solves this:

http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width/2251833#2251833

Am I understanding your question correctly?

Paul D. Waite 2010-07-24 11:27:55

Yes, that's exactly what I want. Now you've gotta explain _why_ it works!

Eric 2010-07-24 12:31:04

Yeah I've never been quite clear on that myself. When you float an element, the *content* of the next element in the source order will wrap around it, but the next element itself actually extends behind the floated element (so that its content can wrap under the float once the float is finished). Applyng overflow: hidden to the element after the float will prevent it from extending behind the element. I don't know why, but I believe it's consistent with the spec — like how elements with overflow: hidden will contain floated descendants.

Paul D. Waite 2010-07-24 13:23:05

That's not actually an explanation — for that I'd need to read and understand the CSS spec.

Paul D. Waite 2010-07-24 13:23:34

ansaurus

tags:

views:

answers:

How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

EDIT:

related questions