Make floating div expand to page height

Question

I've got two columns, one with a flexible width, and one that should expand to the remaining width. I have this set up like this:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 80px;
    float: right;
    background: #aafed6;
    position:relative; /* Needed for positioning an element absolutely inside this dib */
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

Here's the fiddle: http://jsfiddle.net/dms53yt8/

My problem is, I want the right div to have equal height as the left div. How can I do this while still preserving the current structure?

Thanks! Uri

http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height ♦ http://stackoverflow.com/questions/2114757/css-equal-height-columns ♦ http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css And I'm sure you would find other similar questions on SO. — Hashem Qolami, Nov 05 '14 at 09:45

score 1 · Accepted Answer · answered Nov 05 '14 at 09:50

1

How about using display: table for container div & display: table-cell for child divs?

Here is the edited jsfiddle - http://jsfiddle.net/dms53yt8/4/

answered Nov 05 '14 at 09:50

Jigar Jain

1,447
1
15
38

Brilliant! How did I not think of this. Works great thanks. – Uri Klar Nov 05 '14 at 10:14

score 0 · Answer 2 · answered Nov 05 '14 at 09:48

This solution works http://jsfiddle.net/ru02qxLx/

CSS Additions

Add position: relative; to your .container class. Then add position: absolute;, top:0;, bottom:0; and right:0; to your .right class

.container {
   height: auto;
   overflow: hidden;

   /* Added */
   position:relative;
}

.right {
    width: 80px;
    background: #aafed6;

    /* Added */
    position:absolute;
    top:0;
    right:0;
    bottom:0;
}

score 0 · Answer 3 · answered Nov 05 '14 at 09:48

0

You can add padding-bottom and margin-bottom to both divs. please check fiddle.

.right{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

.left{
    padding-bottom: 500em;
      margin-bottom: -500em;
}

DEMO

answered Nov 05 '14 at 09:48

Harry

3,031
7
42
67

Make floating div expand to page height

3 Answers3