How to get a floating div with 100% height to always stay 100%

Question

I have a left float with 100% height and a right float with 100%. Everything works fine until I fill one side with text and the other side just stops.

How can i fix this?

Answer 1

You can use css tables after pasting the parent div for both columns. For instance:

Your HTML:

 <div id="parent"> <div id="leftcolumn"></div> <div id="rightcolumn"></div> </div> 

Your CSS:

 #parent{display:table-row} #leftcolumn{display:table-cell} #rightcolumn{display:table-cell} 

Answer 2

try using the code below.

in HTML

 <div class="content"> <!-- Start UI Leftside --> <div class="ui-leftside"> <div class="ui-cont"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> </div> </div> <!-- End UI Leftside --> <!-- Start UI Rightside --> <div class="ui-rightside"> <div class="ui-cont"> <p>Add Text here how long you want</p> </div> </div> <div class="clear"></div> <!-- End UI Rightside --> </div> 

In CSS,

 .content { position: absolute; } .ui-leftside { background: none repeat scroll 0 0 #F7F7F7; float: left; height: 100%; margin: 0; min-height: 100%; padding: 0; position: absolute; width: 25%; } .ui-cont { margin: 0; padding: 60px 0 10px; } p { margin: 0; padding: 0; } .ui-rightside { background: none repeat scroll 0 0 #999999; float: right; height: 100%; margin: 0; min-height: 100%; padding: 0; width: 75%; } 

Answer 3

Wrap the floating divs in the enclosing div using position: relative , then give the left float with position: absolute to make sure it goes to the bottom.

The left floating div needs an initial height. The outer enclosing div allows 100% height to divide the entire height of the container.

I changed the right float to float: right and gave the title with z-index: 2 .

View in jsFiddle