SolutionCottage.com
Posted  10 Dec 2008 - 23:19:56

Category: CSS


Fill height of div with nested floating divs

Issue:
You might have a page layout made up of floating layers, by using the CSS property float:left. Then when you want the main container to have their full height, this does not work, the container won't get any height at all.

Solution:
The container containing the floating layers needs to have the attribute position: absolute in order to know it's full height depending on it's content. The second problem that comes from this is that if you want this container centered it has no way of knowing where it is because it's absolute positioned. The solution is a nested layer that in relation with the body tag can be relatively positioned (centered).

Example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS with floating layers, centered</title>
<style type="text/css">
body
{
background-color: #ffffff;
font-size: 10pt;
text-align: center;
}

h1 {
font-weight: bold;
font-size: 10pt;
text-align: left;
}

#outercontainer
{
width:760px;
margin:0px auto;
text-align:left;
}

#container
{
position:absolute;
width: 760px;
background-color: #dfdfdf;
font-family: Verdana;
border-width: 1px;
border-color: black;
border-style: solid;
margin: 0px auto;
}

#banner {
background-color: #c5c5c5;
width: 760px;
height: 200px;
font-size: 80pt;
border-bottom: 1px solid black;
}

#menu
{
background-color: #dfdfdf;
width: 150px;
padding: 10px;
float: left;
text-align: left;
}

#contentbox
{
background-color: white;
width: 430px;
padding: 5px;
float: left;
text-align: left;
}

#feeds
{
background-color: #dfdfdf;
width: 140px;
padding: 5px;
float:left;
text-align: center;
}

#footer
{
background-color: #c5c5c5;
width: 100%;
height: 30px;
text-align:center;
border-top: 1px solid black;
float:left;
padding-top:5px;
}

</style>
</head>
<body>
<div id="outercontainer">
<div id="container">
<div id="banner"></div>
<div id="menu">
<h1>
Menu
</h1>
Menu 1<br/>
Menu 2<br/>
Menu 3<br/>
Menu 4<br/>
</div>
<div id="contentbox">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus justo nec velit. Proin ac magna. Donec et purus bibendum libero pellentesque mollis. Curabitur sit amet dolor vitae ipsum bibendum volutpat. Aenean elementum molestie nisi. Praesent enim odio, bibendum in, sagittis ac, rutrum non, diam. Nullam vestibulum. Cras vel augue. Aenean tristique consequat sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius iaculis eros. Duis dui.</p>
</div>
<div id="feeds">
<h1>Feeds</h1>
Feed 1<br/>
Feed 2<br/>
Feed 3<br/>
Feed 4<br/>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>



Marked as helpful by 4 users




1 comment:

12/11/2008 11:33:04 AM  Lucca  wrote:

Thanks for that solution, very helpful ;)


Website: http://pinkboxers.wordpress.com








© SolutionCottage 2008-2011 9/26/2017 10:14:59 AM