1

Here's my an abstraction of my problem: http://jsfiddle.net/BsHpj/8/

Here's one I found in another thread that works: http://jsfiddle.net/QHTeS/2/

Why does his work I want and mine doesn't? All help appreciated.

Here's the less abstracted version of mine: http://jsfiddle.net/nLn3A/

Community
  • 1
  • 1
Phlox Midas
  • 4,093
  • 4
  • 35
  • 56

3 Answers3

4

Your version does not work because you're floating the right div, but not the left one. So the left div is taking up 100% of the width of the parent container and bumping the right div down. If you added float: left; to the left div and float: right; to the right div you should see them on the same line, with a gap between them.

Think of a float as "shrink-wrapping" the container to the size of the content. By default, a container will usually take up 100% of the width of the parent.

twaddington
  • 11,607
  • 5
  • 35
  • 46
  • I think I did as you said but I still can't get the left div to fill the remaining space. http://jsfiddle.net/BsHpj/15/ What am I doing incorrectly? – Phlox Midas May 08 '12 at 06:53
3

Swap the order of left and right. Otherwise the first div will fill all the horizontal space.

Lyn Headley
  • 11,368
  • 3
  • 33
  • 35
2

I believe what you're looking for is one fixed column on the right and one fluid on the left.

Method 1: Swap order of left and right: http://jsfiddle.net/BsHpj/19/ This method involves the least CSS but it means you have to make your HTML a bit less intuitive. (by Lyn Headley)

Method 2: Use margin-left and margin-right: http://jsfiddle.net/VmaZr/14/ This method has nice HTML but involves more CSS code. (by DynamicDrive)

Method 3: Format divs as a table: http://jsfiddle.net/BsHpj/9/ Easily understood but a little more CSS (by Oswaldo Acauan).

Ugtemlhrshrwzf
  • 1,967
  • 1
  • 14
  • 13