Setting div height 100% that is floating inside another div

Question

How would I setup a div to be 100% of the parent div if it is floating?

Here are the two styles I've got, where sidebar is the child of container -

#container {
    width:1200px;
    margin-top:40px;
    overflow:hidden;
    text-align:center;
}
#sidebar {
    width:260px;
    float:left;
    overflow:hidden;
    height:1554px;
}

Do you want to get equal height columns? – roger Apr 10 '12 at 05:30 — roger, Apr 10 '12 at 05:30

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I would do it with Javascript or better said jQuery. Have a look here: How do I keep multiple DIVs the same height using jQuery?

edited May 23 '17 at 12:27

Community

1
1

answered Apr 10 '12 at 05:29

Joseph

9,171
8
41
67

score 0 · Answer 2 · answered Apr 10 '12 at 05:38

0

Elements that contain only floated children have a height that collapses to 0. So if you want to set the height of a child to 100% of the parent, you need to manually set the height on the parent.

answered Apr 10 '12 at 05:38

kingjeffrey

14,894
6
42
47

Setting div height 100% that is floating inside another div

2 Answers2