CODEWITHSUNDEEP
csswidth
Phlox Midas
Phlox Midas

Reputation: 4349

Given two divs on the same line, how can I make the left div fill the remaining horizontal space after I've specified a width for the right div?

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/

Upvotes: 1

Views: 520

Answers (3)

Ugtemlhrshrwzf
Ugtemlhrshrwzf

Reputation: 2105

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).

Upvotes: 2

twaddington
twaddington

Reputation: 11645

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.

Upvotes: 4

Lyn Headley
Lyn Headley

Reputation: 11588

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

Upvotes: 3

Related Questions