Getting "faux" column to span height of parent

Question

http://jsfiddle.net/YZdv4/50/ heres the jsfiddles

UPDATE: I figured you could do this with absolute positioning and javascript; however, are there any solutions with just using css/floats?

Sorry if this is difficult to understand, but i'm trying to make the purple bg #content turn to background:papayawhip by making the #right col 100% height of the parent #content

 <div id="container" class="cf">
    <div id="header">
        <p>im header</p>
    </div>
    <div id="content" class="cf">
        <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
</P></div>
        <div id="right">
            <img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
            <img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />    


        </div>                        


    </div>
    <p>im the container</p>
</div>


   div#container{background:yellow;min-height:500px;}
div#header{background:pink; height:100px;}
div#content{position:relative;background:purple; height:100%;}/*heres parent container*/

div#content #left{float:left; height:100%; background:#222; color:#fff;width:50%;}
div#content #right{float:left; height:100%; background:papayawhip;width:50%;}
div#content #right img{}
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

If you're trying to make a layout with two columns that have equal heights (or appear to have equal heights) then there are several techniques in this answer: http://stackoverflow.com/questions/4756872/how-to-make-div-100-height-relative-to-parent/9152704#9152704 — georgebrock, May 26 '12 at 12:16

score 0 · Answer 1 · answered May 26 '12 at 06:24

0

The background ends because it is the end of the content (One of the quirks of floats). The only way that I found for the papayawhip background to fill out the whole purple background is to add padding to the bottom of it. Such as padding-bottom: 25%; or whatever % works works.

answered May 26 '12 at 06:24

PL3X

482
1
4
12

This will also happen to the `#left` section as well if content is deleted. – PL3X May 26 '12 at 06:29

MNilson · Accepted Answer · 2012-05-26T07:08:27.030

I am not sure I know exactly what you were after, but my intepretation of the question lead to this result: fiddle, http://jsfiddle.net/grE5A/62/

I only pasted the changed CSS elements in here.

HTML

  <div id="container" class="cf">
        <div id="header">
            <p>im header</p>
        </div>
        <div id="content" class="cf">
             <div id="right">
                <img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
                <img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />    


            </div>               

            <div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
    </P></div>



        </div>
        <p>im the container</p>
    </div>

CSS

/*heres parent container*/

div#content #left {
    float: none;
    height: 100%;
    background: #222;
    color: white;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

div#content #right {
    float: none;
    height: 100%;
    background: 
    papayaWhip;
    width: 50%;
    position: relative;
    padding-left: 50%;
    z-index: 0;
}

Matthew · Answer 3 · 2012-05-26T12:38:47.650

0

There is a problem:

The child, DIV#left won't be able to calculate it's own height using the parent DIV's min-height

div#container{background:yellow;min-height:500px;}

This is why it won't stretch to the bottom of DIV#content.

Edit:

I don't always suggest tables for layouts, but when I do it's for problems like this.

http://jsfiddle.net/YZdv4/56/

edited May 26 '12 at 12:38

answered May 26 '12 at 12:12

Matthew

8,183
10
37
65

Getting "faux" column to span height of parent

3 Answers3