2 replies [Last post]
thier.issard
Offline
newbie
Last seen: 2 years 39 weeks ago
Joined: 2011-12-21
Posts: 1
Points: 2

Hello

I have a layout that looks something like this:

<div id="content" style="width:100%">
    <div id="left_float" style="float:left">Fit div to contents</div>
    <div id="right_float" style="float:right">Fill remaining horizontal space</div>
</div>

I want the left div to fit its contents (it's not possible to know the width in advance), and I want the right div to always fill the remaining horizontal space.

At the moment the left float works the way I want it to but the right float also fits its contents and doesn't expand to fill the rest of the screen. Anyone know how I could get it to fill the remaining space without having to specify a width on the left div?

Cheers

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 2 years 15 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

float (fit to contents), right float fill remaining space

You might want to check out the below to know more about floating elements:

http://css.maxdesign.com.au/floatutorial/

Cheers
Stevie (Purves Web)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 29 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

Know when to float'em; know when to fold'em

Don't float the right column. Give it a new block formatting context.

<div id="content" style="width:100%">
  <div id="left_float" style="float:left">
    Fit div to contents
  </div>
 
  <div id="right_float" style="overflow: hidden;">
    Fill remaining horizontal space
  </div>
</div>

Note: Don't name columns for their position; name them for what they contain. Consider you may someday want to flip the columns. You'd have #left_float on the right, and #right_float on the left and not even floated.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.