How does a parent div automatically change its height based on child growth?
div#main{ width: 970px; height: 100px; background: rgba(255,0,0,1); border: 5px solid rgb(251,151,117); margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/ padding: 10px } div#left{width: 383px; height: 100%; margin-right: 5px; background: rgb(0,0,255); float:left } div#description{width: 100%; height: 50%; background: rgb(0,0,0) } div#following{width: 100%; height: 50%; background: rgb(0,255,0) } div#posts{width: 577px; height: auto; margin-left: 5px; background: rgb(255,255,0); float: right }
<div id="main"> <div id="left" class="cell"> <div id="description" class="cell"> </div> <div id="following" class="cell"> </div> </div> <div id="posts" class="cell"> there are some contents here (height is set to auto) </div> </div>
I made a very simple example so that you can see how the parent height of a variable works.
.parent { height: auto; border: 1px dashed #f00; padding: 5px; } .child { height: 100px; border: 1px dashed #0f0; }
<div class="parent"> <div class="child"> </div> </div>
Follow what is, and you will do your best.
After viewing the code, this is a problem with the float, you should add a new div to the bottom with clear: both; to clear the floats and make the #main div #main .
clear: both;
#main
See an example here .
div#main{ width: 970px; background: rgba(255,0,0,1); border: 5px solid rgb(251,151,117); margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/ padding: 10px }
Delete height attribute
CSS3
.container { display: inline; position: relative; }
Gotta fix it. Use inline-block if you want it to be a block with an inline block.
inline-block