Question

I have something like this:

<div class="top">top</div>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

Relevant code in jsFiddle

As you can see, between top and bottom divs, there is a div container. I want this div container to move bottom dive as much as is needed (and i don’t want it to be a fixed value – that means if, lets say left container will get much higher – the bottom div will be pushed down as well.

How can i do that?

Answer 1

This is a simple seeming problem that ends up being kind of tricky. The above suggestion about position:relative vs. position:absolute are a good first step. After that you need to make some room for the set width right div:

.left {
    height: 100%;
    min-height: 50px;
    border:1px dashed red;
    padding-right: 50px;      <---
}

Then float your right div in the space you made:

.right {
    float:right;              <---
    width: 50px;              (This needs to match the padding-right value above.)
    text-align: right;
    min-height: 50px;
    height: 100%;
    border:1px dashed blue;
}

Finally, put the right div before the left div in the html:

<div class="top">top</div>
<div class="container">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="bottom">bottom</div>

(Tested in Chrome and IE.)

See: Right div fix width, left div extend to max width?

You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/

Will that work for you?