CODEWITHSUNDEEP
csslayout
meandmycode
meandmycode

Reputation: 17317

CSS fluid 'column'

Whats the best way to get this layout in CSS? imagine that I have three divs, two divs inside another.. of the two inner divs, the first one has a specific width set, and the second div is expected to take up the remaining space.

Generally I'd end up setting a specific width on the second column, and manage updating this in the end that the containing div width changed.

If I float the fixed but not the fluid, the fluid column will wrap underneath the fixed div (not what is wanted).

+-------+  +--------------------------------------+
| fixed |  |                                      |
+-------+  |               fluid                  |
           |                                      |        
           |                                      |
           +--------------------------------------+

<div>
  <div>fixed</div>
  <div>fluid</div>
</div>

This has to be an entirely css solution, no javascript frameworks- and ideally works on most commonly used browsers with minimum 'hackage' (if at all).

Hope the ASCII art works,

Thanks.

Upvotes: 5

Views: 5610

Answers (4)

sdw3489
sdw3489

Reputation: 521

There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites.

#fixed{
     width:200px;
     float:left;
}
#fluid{
    overflow:hidden;
}

Upvotes: 0

glue
glue

Reputation: 95

Hopefully this at least helps you get started:

* {
   margin:0;
}

div#wrapper {
   margin:0;
   height:auto !important; //IE Hack
   height:100%; //IE Hack
   min-height:100%;
   overflow:auto
}

div#fixed{
   float:left;
   position:absolute;
   background-color:red;
   margin:0;
   height:200px;
   width:200px
}

div#fluid{
   float:right;
   position:absolute;
   left:200px;
   background-color:blue;
   display:block;
   height:80%;
   width:60%
}

The "wrapper" would be your wrapping div. I only set the fluid column to a width of 60% so you could see that it should act fluidly. I tested this in Opera 10, IE 6, and Firefox 3 with only minor problems. IE wants to append an extra 200px to the right if you set the width of the fluid column to 100%. I'm sure there is a work around for this somewhere.

Upvotes: 0

vladocar
vladocar

Reputation: 271

You can use Emastic CSS Framework that support fluid columns. Here Link is working example similar to your "ASCII art work" :)

Upvotes: 1

geowa4
geowa4

Reputation: 41853

the markup

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

the css

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

That should do the trick. I use it on my personal site. The margins make it all stay on the same level.

Upvotes: 16

Related Questions