How To Make Flowing Text Extend And Fit The Div Without Specifying A Height

I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag? Here

Solution 1:

Change the #bodyContainerheight to auto. Like this: JSFiddle

Solution 2:

All you have to do is add min-height. So replace height property with min-height. And you are done.

Solution 3:

If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:rightsidebarRight. Check this fiddle

CSS changes

#bodyContainer { 
    width:1024px; 
    min-height:100px; 
    margin:auto; 
    background-color:#f4f3e7; 
    padding-top:20px; 
    position:relative; 
    overflow:hidden; 
}

#sidebarLeft { 
    height:100%; 
    width:360px; 
    background-color:#FFF; 
    margin-left:30px; 
    margin-bottom:20px; 
    position:absolute; 
    top:20px;
    left:0
}
#sidebarRight { 
    height:100%; 
    width:634px; 
    float:right; 
}