One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

View Demo Clear Floats

Demo 1:

The demo below shows the issue with floating child elements where the parent container doesn’t expand. To fix this problem, you can simply add the CSS property overflow:auto (or overflow:hidden) to the wrapper container. This is perhaps the simplest way to clear floats.

overflow auto

.container {
	overflow: auto;
}

Demo 2:

Overflow:auto can also be used to prevent content from wrapping around the floated element. Let’s say you are designing a comment list. You would, most likely, have an avatar floating on the left and the comment to the right. To prevent the comment from wrapping around the avatar just add overflow:hidden to the comment container. The advantage of using overflow here is that I don’t have to set a float or width to the comment container. The container automatically aligns after the floated avatar image.

overflow auto

.image {
	float: left;
}

.text {
	overflow: hidden;
}

Drawbacks (see demo)

Although it is a nice trick to clear floats there are some drawbacks:

  • Using overflow:auto will cause a scrollbar if your content is extending the boundary of the container. For example, if you have a long unbreaking text (ie. long url text) or a large image that is bigger then the container a scrollbar will show.
  • To avoid a scrollbar from showing you should use overflow:hidden. Again, there is a drawback to this method as well. Using overflow:hidden will hide any content that exceeds the boundry of the container.

Word-wrap

To solve the long unbreaking text issue, simply add word-wrap:break-word to the container and it will force the text to wrap onto a new line.

.container img {
	max-width: 100%;
	height: auto;
}

Max-width

To prevent large images from extending the boundar, add max-width:100% and it will resize the image to the max width of the container.

.container {
	word-wrap: break-word;
}

178 Comments

1 7 8 9
  1. PlasticCardChick
    Aug 31, 2011 @ 7:55 pm

    this is so handy!! as a bit of a CSS novice this is going to make life so much easier

    Reply

  2. Ron
    Aug 31, 2011 @ 9:50 pm

    Great Stuff! Thanks

    Reply

  3. mybookmart
    Oct 3, 2011 @ 4:24 am

    nice stuff i like it

    Reply

  4. appsmenow
    Oct 3, 2011 @ 7:54 am

    very nice. thanks

    Reply

  5. kevin
    Oct 15, 2011 @ 8:31 am

    Great article! Thanks for posting.

    Reply

  6. Krishna
    Oct 25, 2011 @ 5:41 am

    Absolutely useful … !

    Reply

  7. mehmet
    Apr 10, 2012 @ 8:23 am

    Very useful information. It is good to learn this. :)

    Reply

  8. Kirk
    May 17, 2012 @ 7:47 am

    Your Word Wrap and Max-Width CSS examples are mixed up. They’re going to the wrong headings.

    Reply

  9. JeanDavid
    Jun 9, 2012 @ 3:30 am

    I had issues with the first probleme which is the wrapper box which dosn’t fit to the floating box, and comes your article !!!

    Magic, thank you !

    Reply

  10. Wollongong Rentals
    Jul 16, 2012 @ 1:54 am

    This is very informative for those persons who are facing clouts case for long tine. With the help of this post they can remove their tensions.

    Reply

  11. RootShell
    Aug 17, 2012 @ 1:02 pm

    Wouldn’t “display: table;” in the main div solve this issue?

    Reply

  12. kiran
    Nov 27, 2012 @ 5:03 am

    this is very nice… for beginners this is very use full… some times i face this type of problems…. nice stuff…

    —kiran
    skype: alokweb_kiran

    Reply

  13. Julien
    Jan 28, 2013 @ 11:30 am

    Thank you a lot for your solution. It is very helpful for me :)

    Reply

  14. Dymo L
    May 24, 2013 @ 4:44 pm

    Excellent post. I think that CSS clearing floats are always better then this.
    Thanks

    Reply

  15. baju batik
    May 26, 2013 @ 6:22 am

    thanks

    Reply

1 7 8 9

Leave a Reply