Swim right and fill in parent

Question

When an element moves right in a relatively positional element, how do I make the height fill the parent element?

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

 #page { width: 980px; padding: 10px; background: #3C4B76; display: block; margin: 10px auto auto auto; position: relative; } #left { padding: 0; margin: 0; width: 230px; float: left; } #right { float: right; width: 720px; border-left: 1px solid white; padding: 5px 5px 5px 20px; height: 100%; position: relative; display: block; } 

In this example, the #right element #right not fill the '#page' element, it just grows to size. If it's smaller than #page , I want #right populate the parent element.

Answer 1

Try this for the parent:

 overflow:auto; 

Another solution:

Parent:

 display: table; 

child:

 display: table-row; 

Tick fiddle

UPDATE: To set columns with the same height using CSS with CSS, you should read this post

Answer 2

Copy paste the following

CSS

 #page { width: 980px; padding: 10px; background: #3C4B76; display: block; margin: 10px auto auto auto; position: relative; } #left { padding: 5px 0; margin: 0; width: 230px; float: left; } #right { float: right; width: 720px; border-left: 1px solid white; padding: 5px 5px 5px 20px; height: 100%; position: relative; display: block; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ 

HTML:

 <div id="page" class="clearfix"> <div id="left">left</div> <div id="right">right</div> </div> 

Link to the script:

http://jsfiddle.net/uExdD/9/

Answer 3

Just give it the same height as the parent and apply clearfix to the parent.

 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */