Problem with height of div containing floats and inline lists.

Float is one of the most powerful property in CSS, they are the key for many useful layouts and CSS frameworks.  When we float a div, image or any other element, it’s taken out the regular document flow. The most common problem due to this property of float is, when we have a div containing a floated element whose height is larger than the height acquired by the containing div due to the elements in regular document flow, then our floated div falls out side container ( Check the screenshot below). In most cases this is not the result a developer / designer would be expecting.

A simple way to solve this problem of height is to add this piece of code to your style sheet, and apply the clearfix class to the div containing floated elements.

[css]

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

[/css]

The result of applying the clearfix class to the container div is shown below.

More info about similar fixes can be found at pageAffairs
Explaining this clearfix fix for div’s containing floated is not the main purpose of writing this post, now that you know about this fix lets see how to solve the problem on which I was stuck for 2 days 🙁 .

Problem

A div containing list elements with display:inline; property will not take the height equal to the height of the list element.

I have the following CSS and HTML code

CSS

[css]

#nav1-container,
#nav2-container{background:#ff0;}
#nav1-container {border-bottom:solid 5px #f00;}
#nav2-container {border-top:solid 5px #f00}
ul.navigation {margin-left:-10px;}
ul.navigation li {display:inline;padding:.5em 1em;}
ul.navigation li:hover {background:#000}

[/css]

HTML

[html]
<div id="nav1-container">
<div id="nav1" class="grid_16">

<ul class="navigation top">
<li class="page_item current_page_item first"><a href="http://swiftthemes.com/swiftTest">Home</a></li>
<li class="page_item page-item-2"><a href="http://swiftthemes.com/swiftTest/?page_id=2" title="About">About</a></li>
</ul>

</div><!–/nav1–>

</div><!–/nav1-container–>

<div id="header-container">
<div id="header" class="grid_16">

<div id="logo">
<h2 class="blogname"><a href="http://swiftthemes.com/swiftTest/">SwiftTheme Test Blog</a></h2>
<h2 class="blog-title">Just another WordPress weblog</h2>
</div><!–/logo–>

<div id="header-ad">

</div><!–/header-ad"–>

</div><!–/header–>
</div><!–/header-container–>

<div id="nav2-container">
<div id="nav2" class="grid_16">
<ul class="navigation bottom">
<li class="page_item current_page_item first"><a href="http://swiftthemes.com/swiftTest">Home</a></li>
<li class="page_item page-item-2"><a href="http://swiftthemes.com/swiftTest/?page_id=2" title="About">About</a></li>

</ul>
</div><!–/nav2–>
</div><!–/nav2-container–>

[/html]

No matter what the padding of list elements be, the height of container div wouldnt change. Hard coding the height of containers is not an option for me as SWIFT will be used by lot of users, and some may have one row of links and others may 2 or 3 rows.

After trying different approaches to solve this problem, I finally realized that the display inline attribute is the culprit, so I removed the display:inline attribute and floated the list elements (li’s) towards left and used the clearfix class for the container and I finally got it the way I wanted it to look.

Here is what I exactly did..

Changed this

[css]ul.navigation li {display:inline;padding:.5em 1em;}[/css]

to

[css]ul.navigation li {float:left;padding:.5em 1em;}[/css]

and added clear fix class to both the containers

Changed

[html]<div id="nav1-container">[/html]

to

[html]<div id="nav1-container" class="clearfix">[/html]

and the result is shown below

PS

• This problem delayed the release of SWIFT by 2 days.
• Above code is from the v5.0 of SWIFT, isn’t that code poetry??