How to give a floating sidebar 100% height of its parent?
css, html, styles
Solution
The problem is that `min-height` does not work the same way that `height` does, so as far as your sidebars are concerned the height is 0. You have two options:
1.) Specify a height on your container `div` and then set the sidebars to have a `height: 100%`. Here is the updated fiddle.
2.) Set your containing `div` to have `position: relative` and the sidebars to have `position: absolute`. This should allow the `height: 100%` to work with `min-height`. However, with this solution you cannot use the `float` property, so for your right sidebar you will need to set `right: 0`. Check out this fiddle for a working example.
Problem
Here is my jsFiddle I want a layout like above but I don't want to manually assign height to my sidebar(as i am doing now). I want the sidebar height to be 100% respect to its parent element i.e content-area ``` <header> </header> <div class="content-area"> <div class="left-sidebar"></div> <div class="main-area"></div> <div class="right-sidebar"></div> </div> <footer> </footer> ``` my css ``` .content-area { min-height: 310px; background-color: #bbb; } .left-sidebar { float: left; width: 50px; height: 310px; background-color: #abcdef; } .right-sidebar { float: right; width: 50px; height: 310px; background-color: #abcdef; } ```