2 replies [Last post]
thier.issard
Offline
newbie
Last seen: 4 years 40 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: 4 years 17 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: 4 hours 36 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9584
Points: 3650

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.