How to make floated left child div 100% height of a centered parent div

Question

I'm looking to make a child div that is floated left 100% the height of it's parent div. The height of the parent div will be determined by the amount of content in the other child divs.

In this example, I want the green div to extend to the bottom of the parent div.

 .parent { width: 250px; margin: 0 auto; background-color: blue; } .first { background-color: green; height: 300px; width: 50px; float: left; } .second { background-color: red; height: 200px; } .third { background-color: yellow; height: 200px; } 

 <div class="parent"> <div class="first"> </div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> 

http://jsfiddle.net/Dale12/8mndypzf/1/

Answer 1

This answer absolute positions the green block item inside of parent so the height of the parent is determined by the content within. You will have fewer cross browser compatibility issues with this solution.

 .parent { width: 250px; height: auto; margin: 0 auto; background-color: blue; position: relative; } .first { background-color: green; height: 100%; width: 50px; position: absolute; } .second { background-color: red; width: 200px; height: 200px; float: right; } .third { background-color: yellow; width: 200px; height: 200px; float: right; } .clear { clear: both; } 

 <div class="parent"> <div class="first"></div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> <div class="clear"></div> </div> 

Answer 2

If you want your div to have 100% height then you no more need the float property but you need a 2 columns layout that you can achieve with better features.

Here is an example using CSS-grid:

 .parent { width: 250px; margin: 0 auto; background-color: blue; display:grid; grid-template-columns:50px 1fr; grid-template-areas: "float first" "float second" } .first { background-color: green; grid-area:float; } .second { background-color: red; height: 200px; grid-area:first; } .third { background-color: yellow; height: 200px; grid-area:second; } 

 <div class="parent"> <div class="first"> </div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> 

Answer 3

Make the green div have an absolute position property, then make room for it in the parent

 .parent { width: 250px; margin: 0 0 auto 50px; position: relative; background-color: blue; } .first { background-color: green; /*height: 100%;*/ width: 50px; position: absolute; top: 0; bottom: 0; left: 0; } .second { background-color: red; height: 200px; } .third { background-color: yellow; height: 200px; } 

 <div class="parent"> <div class="first"> </div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> 

Answer 4

CSS-Grid can do that with any heights you choose.

 .parent { width: 250px; margin: 1em; background-color: blue; display: inline-grid; vertical-align: top; grid-template-columns: auto 1fr; } .first { background-color: green; width: 50px; grid-row: 1 / span 2; } .second { background-color: red; } .second-2 { height: 85px; } .third { background-color: yellow; } 

 <div class="parent"> <div class="first"> </div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> <div class="parent"> <div class="first"> </div> <div class="second second-2"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> 

Answer 5

Because your parent doesn't have a height set a percentage height relative to your parent is not possible. If you want to keep using float, you need javascript to update the floating items height.

 function updateHeight() { var parent = document.getElementsByClassName("parent")[0]; var floatingElement = document.getElementsByClassName("first")[0]; // This is not pretty and can result in serious slowdowns when changing the third element drastically. There are most likely libraries that will do a better job. while (floatingElement.clientHeight != parent.clientHeight) { floatingElement.style.height = parent.clientHeight + "px"; } } updateHeight(); 

 .parent { width: 250px; margin: 0 auto; background-color: blue; } .first { background-color: green; width: 50px; float: left; } .second { background-color: red; height: 200px; } .third { background-color: yellow; } 

 <div class="parent"> <div class="first"> </div> <div class="second"> qwef awef qawe fawe f </div> <div class="third"> qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f </div> </div> 

Because changing the height of the floating element causes text in the other divs to shift right, the height of the floating div must be changed until it exactly fits the parent. This can be computation intensive if the other elements change a lot, if it's a one-time operation it should be fine.

Please not that whenever you change one of the other elements, you must call the updateHeight function again.

You can however completely remove the while loop by setting a margin-left to the width of the floating elements on the other children

.second {
  background-color: red;
  height: 200px;
  margin-left: 50px;
}

.third {
  background-color: yellow;
  margin-left: 50px;
}

Then you can simply remove the while loop and set the height once ( floatingElement.style.height = parent.clientHeight + "px"; ). Again, call updateHeight every time you change the elements.