ansaurus

Question

How to occupy all the space in a div when working with min-height header / footer

Answer 1

A:

The way I usually do it is by using the float and padding properties.

HTML:

<div id="leftCol">
   content
</div>
<div id = "rightCol">
   content
</div>

CSS:

#leftCol {
    width: 200px;
}

#rightCol {
    width: 100%;
    float: right;
    padding-left: 200px;
}

Should work.

So you are using float, and padding to put the div's side by side.

You might need:

position: absolute;
top: 0px;
right: 0px;

in your #rightCol CSS style (Not tested btw... from memory)

JD 2010-03-18 04:56:57

unfortunately that doesn't work. Two problems:1) in my example, the right column still positions itself underneath the left one.2) i want it the left as well as the right div to fill up vertically inside the content div.

javacoder 2010-03-18 05:03:34

OK. You will need to set the position of the containing DIV (I.E. content) so that child divs (divs within the content div) can use the position of their parent (CSS is cascading). You can then use position to set the relative positioning of the children div's.

JD 2010-03-18 05:17:37

Answer 2

A:

Just in case somebody else stumbles onto this question like me. This is what I ended up doing.

<div class="left">
    text
</div>
<div class="right">
    text
</div>

.left {
    float: left;
    width: 200px;
}
.right {
    margin-left: 200px;
}

And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/

Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/

Nikita Rybak 2010-10-14 00:20:58

ansaurus

tags:

views:

answers:

How to occupy all the space in a div when working with min-height header / footer

related questions