Set floating div to height: 100%?

Question

I suspect there is no answer to this but I was wondering if there is a way to set the height of a floating div to 100%?

I have two divs within a wrapper div:

<div id="wrapper">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

The right div has a set height and I want the left div to match it, so I created:

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

but the left div doesnt expand. Fiddle here: http://jsfiddle.net/8dstK/2/

Would anyone know a way to achieve divs of equal height?

Should I just use JQuery to grab the height of right div and apply it to left div?

@upcoming_coder on my real site one column is dynamically filled with content from my CMS - unknown height — MeltingDog, Jul 19 '13 at 05:58

Rory O'Kane · Accepted Answer · 2013-07-19T06:06:43.713

You could do it by setting up a table-like scructure of <div>s in your HTML and then using display: table, display: table-cell, etc. This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 and below do not support display: table.

jsFiddle

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</div>

#wrapper       { display: table; }
#inner-wrapper { display: table-row; }
#left          { display: table-cell; }
#right         { display: table-cell; }

I had to remove float: left and float: right from #left and #right to get the table-cell display to work, since table cells can’t float. However, this has stuck the two divs together. And table cells do not accept margins, only padding. You may need an extra display: table-cell div between left and right to separate them, if you don’t want padding separating them.

Read more about display: table and family on QuirksMode and on MDN.

Thanks! that works somewhat, but then it runs into my footer. Any advice for that? — MeltingDog, Jul 19 '13 at 06:16
@MeltingDog Does [this jsFiddle](http://jsfiddle.net/roryokane/NcAv5/) solve your problem? I’m just guessing where you want your footer. I added an extra wrapper div to separate the table-like `div` from the footer. If that’s not the problem you’re having with your footer, then please post a code example in which the footer is broken. — Rory O'Kane, Jul 19 '13 at 06:28
No please, don't use display:table :( I know in css there is no other way, i prefer to use Javascript — PaoloCargnin, Jul 19 '13 at 07:29

score 0 · Answer 2 · answered Jul 19 '13 at 05:46

0

This is the way I know how to do it. With position absolute and top / bottom / left Updated your fiddle: http://jsfiddle.net/8dstK/3/

Basically, you make the wrapper div position relative so that child divs can be positioned absolutely within the wrapper. Next, we set the left div to be positioned absolutely and account for the padding in our positioning. Set the top to 5px, left to 5px and bottom to 5px. That should do it.

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    position:relative;
}

#left{
    width: 90px;
    float:left;
    background-color: #ccc;
    top:5px;
    left:5px;
    bottom:5px;
    position:absolute;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

answered Jul 19 '13 at 05:46

Ray Perea

5,640
1
35
38

The text in the left div overflows... I know.. One draw back. However, the question was how to make the left div expand to 100%... And it is. – Ray Perea Jul 19 '13 at 06:02
1

I thought it was a good potential solution, but didn't knew that it cracked in long term. +1 @Mr.Alien for bringing your point to light. – Nitesh Jul 19 '13 at 06:02
@RayPerea - Just for my curiosity, what about the wrapper? – Nitesh Jul 19 '13 at 06:03
@NathanLee - If the content in the wrapper increases, do does the left div. Also, if the right div increases, so does the left div because this will also increase the size of the wrapper which in turn increases the size of the left div. One fix is to add overflow:auto; to the left div so that text is scrollable and won't simply overflow. – Ray Perea Jul 19 '13 at 06:06
One thing I overlooked.. you don't need float:left on the left div – Ray Perea Jul 19 '13 at 06:08
Why do you need to scroll it?? The point is just to expand it according to contents of the div. - @RayPerea – Nitesh Jul 19 '13 at 06:27
If you want the left div to expand according to the contents of the div, it won't with my solution. It will only expand to the height of the wrapper regardless of the contents within it. If you want the behavior where the div expands according to the contents, you can use a table or you can set the divs up to display as table cells. – Ray Perea Jul 19 '13 at 06:31
@NathanLee yap, I try various ways to break my own codes and that's the way I clean them... – Mr. Alien Jul 19 '13 at 06:50

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

use the most used clearfix class at the parent div. this question is already available. check this link. How do you keep parents of floated elements from collapsing?

edited May 23 '17 at 12:34

Community

1
1

answered Jul 19 '13 at 05:55

besabestin

482
8
26

score -1 · Answer 4 · answered Jul 19 '13 at 05:47

-1

There is an answer and with a solution. The height does not expand is because it is a <div> and <div> is a block level element.

If you want it to expand, you have to convert its display to table for it to expand.

Below is the working demo for the same.

WORKING DEMO

The HTML:

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

The CSS:

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    display:table;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
    display:table;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

answered Jul 19 '13 at 05:47

Nitesh

15,425
4
48
60

Sorry couldn't get you? You mean to say that `#left` should also have the same height? If yes, then the OP wants the the floating div should match the height to 100% if the `#right` div is increased. So that is what is being acheived. – Nitesh Jul 19 '13 at 05:51
@RohitAzad Just made `height: auto;` for testing, works kwel... http://jsfiddle.net/8dstK/8/ Nathan - +1 – Mr. Alien Jul 19 '13 at 05:52
Also a Thnx to the one who -Negatived, but shall appreciate a reason. – Nitesh Jul 19 '13 at 06:28

score -1 · Answer 5 · answered Jul 19 '13 at 05:48

-1

Make the parent element set to fixed height (say 300px) , then the children will automatically take the entire width of the parent on 100% as http://jsfiddle.net/8dstK/6/

 #wrapper {
        background-color: red;
        width: 200px;
        height: 300px;
        overflow: auto;
        padding: 5px;
    }

    #left{
        width: 90px;
        height: 100%;
        float:left;
        background-color: #ccc;
    }

    #right{
        width: 90px;
        height: 100%;
        float:right;
        background-color: blue;
    }

answered Jul 19 '13 at 05:48

Muthu Ganapathy Nathan

3,199
16
47
77

The point is, if the height has to be set fixed, then there is no point of a solution, because it will give solution for a temporary basis and it will not be a long term solution. Say for this you fixed wrapper to 300px, but when the content comes, you will not go on increasing the height. It has to be stopped at some point, so the relevance is to make it fluid and not fixed. – Nitesh Jul 19 '13 at 05:53

Set floating div to height: 100%?

5 Answers5

Related