How to get height:auto; for a parent element when child elements use float:left; or float:right?
parent
#parent {
width:100px;
height:auto;
padding-bottom:10px;
background:#0F0;
}
child_left
#child_left {
width:50%;
height:50px;
float:left;
background:#00F;
}
fiddle: http://jsfiddle.net/27EWw/
The default height of an element is auto, but it seems like are you looking for a clearfix. If an element's children are floated, they are essentially taken out of the flow of the document, therefore if the parent doesn't have defined dimensions, it will collapse upon itself. You could add overflow:auto to the parent element:
#parent {
width:100px;
overflow:auto;
padding-bottom:10px;
background:#0F0;
}
Alternatively you could also use a clearfix:
#parent:after {
clear:both;
display:table;
content:'';
}
You could also have a clearfix class, either options would work. If you wanted to avoid these options, you would simply have to set dimensions on the parent element in the first place. Obviously, this isn't always the best option as some elements will have children with varying dimensions.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments