How to give a floating sidebar 100% height of its parent?

Question

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;
}

If you give a specific height to the container you can just do a `height: 100%` — Charles380, Aug 09 '13 at 14:05
http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh — nsawaya, Aug 09 '13 at 14:06
@nsawaya i saw that question. but i am specifying parent's div height here — shubendrak, Aug 09 '13 at 14:10
@Shubendra you are specifying a minimum height. Try actually specifying the actual height. i.e. `height: 310px;` — Charles380, Aug 09 '13 at 14:16
@AnaMaria can you help me clearing my doubt i posted in that answer — shubendrak, Aug 09 '13 at 14:53

Default · Accepted Answer · 2013-08-09T17:27:03.363

6

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.

edited Aug 09 '13 at 17:27

answered Aug 09 '13 at 14:07

Default

16,020
3
24
38

@Default i have to write content in main-area div. by using absolute positioning my content goes hidden. and when i write anything the right-sidebar also slides down – shubendrak Aug 09 '13 at 14:37
@Default is there any advantage of using float on left-sidebar? as you have used absolute positioning i can assign it as left: 0; – shubendrak Aug 09 '13 at 14:52
No, sorry I accidentally left that float in there. `left: 0` would be the right way to go. I'm looking into the other issue you mentioned. – Default Aug 09 '13 at 17:20
That was my bad, you'll also have to give your `.main-area` class `position: absolute`. I've updated the fiddle in my answer to demonstrate with content. Hope this helps :) – Default Aug 09 '13 at 17:26

score 0 · Answer 2 · answered Aug 09 '13 at 14:06

0

.right-sidebar { float: right; width: 50px; height: auto; background-color: #abcdef; position:relative;}

Try this ... Is this what you're shooting for?

answered Aug 09 '13 at 14:06

pepster

35
1
1
6

It doesn't help your fiddle, but I have done something similar to fix my sidebar. – pepster Aug 09 '13 at 14:08

score -1 · Answer 3 · answered Aug 09 '13 at 14:09

give height property to the ".content-area" class and then apply 100% height to the sidebar. for ex:

.content-area {
min-height: 310px;
background-color: #bbb;
height: 500px;
}
.left-sidebar {
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 100%;
background-color: #abcdef;
}

How to give a floating sidebar 100% height of its parent?

3 Answers3