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.

Floated image flowing out of the container DIV

Floated image flowing out of the container DIV

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.

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

Now donald is with in the container DIV. Cool !!

Now Donald is with in the container DIV, Cool !!

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

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.

{ Problem with the height of inline list elements } You can see the home link flowing out of the container.

{ Problem with the height of inline list elements } You can see the home link flowing out of the container.

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

to

and added clear fix class to both the containers

Changed

to

and the result is shown below

See the home link after the fix.

See the home link after the fix.

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??

6 thoughts on “Problem with height of div containing floats and inline lists.

  1. Hi – I’m trying to make the body background color extend down the entire length of the page. Where do I find the <div> code to modify this?
    Thanks for any help!
    http://www.videoregeneration.com

  2. How can I show the Post excerpt after hovering a link  as in Swift has ????
    Nice theme

  3. I just uploaded 4.1.5 and it will not take ANY of the changes I am trying to make to the header height and layout.  I did already change the permissions as you told us to – but nothing is working.  Will 5.0 have fixes?  I’ve been working with version 3.1.9.3 and like it – but am interested in the new features.

    Thanks for all that you do – I really like this theme overall and will be sticking with it.  As I upload it to a second site I will also be sending you a payment. Keep up the great work!

  4. So does that mean that swift v5.0 is ready? I have been waiting anxiously for days. Seriously I’ve been counting, I just want it.

Leave a Reply

Your email address will not be published. Required fields are marked *