4

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.

Community
  • 1
  • 1
Eric
  • 95,302
  • 53
  • 242
  • 374
  • Ah: thing is, it also looks like you want the second column to stay wide enough to contain the longest word in it? And for the width of the first column to be no more than the space left by the second column once the second column been shrunk to this size? Is that right? – Paul D. Waite Jul 24 '10 at 11:30
  • I want the right shrink-wrapped column to behave roughly as though it were floated, and the left to fill the remaining width. So yes, basically. – Eric Jul 24 '10 at 12:11
  • Ah gotcha. Yup, my answer does that. – Paul D. Waite Jul 24 '10 at 13:19

4 Answers4

3

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

xHTML/CSS: How to make inner div get 100% width minus another div width

Am I understanding your question correctly?

Community
  • 1
  • 1
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • Yes, that's exactly what I want. Now you've gotta explain _why_ it works! – Eric Jul 24 '10 at 12:31
  • 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 Jul 24 '10 at 13:23
  • That's not actually an explanation — for that I'd need to read and understand the CSS spec. – Paul D. Waite Jul 24 '10 at 13:23
1

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

greg0ire
  • 22,714
  • 16
  • 72
  • 101
  • That almost works, but if the shrink-to-fit column is to short, the first will wrap under. Also. both columns have borders – Eric Jul 24 '10 at 10:09
  • 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 Jul 24 '10 at 10:27
1

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.

Eric
  • 95,302
  • 53
  • 242
  • 374
tereško
  • 58,060
  • 25
  • 98
  • 150
  • That seems to work. Although I had to remove the fixed-width on the `.layout` div. – Eric Jul 24 '10 at 12:03
  • So basically, you're using `display: table-cell`? – Eric Jul 24 '10 at 12:09
  • 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". – tereško Jul 24 '10 at 12:34
-1

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
  • 25,237
  • 6
  • 71
  • 68
  • Unfortunately, neither column is fixed width. The width is created by shrink-wrapping – Eric Jul 24 '10 at 11:10