Grow your CSS skills. Land your dream job.

#42: All About Floats Screencast

Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences.

Links from video:

Comments

  1. Permalink to comment#

    Great Screencast, i’ve had the IE6 problem you talked about, it all makes sense now.

    Thanks

  2. aboleo
    Permalink to comment#

    Great stuff.
    But i missed the easy clearing method. That one i use very often.

    And btw: i love markdown

    Chris thanks alot for your amazing stuff in here!

  3. Permalink to comment#

    You can also fix the IE6 double-margin bug by applying “display: inline;” to the respective floated element.. much easier and way cleaner than a javascript-solution (also, it’ll work for people who have javascript disabled).

    And no.. I have no idea why this works, but then again, I have no idea why IE6 doesn’t render it properly in the first place, so there you go.

  4. Permalink to comment#

    Great tutorial. I have just dropped support for IE 6. Ticks me off all the time.
    P.S. I like the design

  5. Frederico Gonzalez
    Permalink to comment#

    Nice, Helps a lot! If you want another idea how about tables, I know they are classic and outdated, but how about for organizing huge amounts of data?

  6. Permalink to comment#

    @Nathan C

    What do you tell your clients?
    “sorry i currently don’t support the worlds most distributed browser “

  7. Permalink to comment#

    i guess ie6 isn’t worth it anywho..

  8. MarGera
    Permalink to comment#

    Nice tutorial Chris. I heard last week i think, that Firefox now had 20% of the browser market, which is great news and hopefully we can get rid of IE altogether!! Just wondered Chris on the last part with the article, it shows in a diagram with the side bar being pushed down in IE6, what is the font that is used where it says “Push Down”??

  9. Permalink to comment#

    aboleo, Easy Clearing is very inconsistent. Not always work.
    Nice article for begginers Chris :)

  10. Murray
    Permalink to comment#

    Hey Chris,

    Been enjoying your screencasts since you started them and I have learned a ton.

    I took HTML and CSS in school, yet I’ve found that these web tutorials are so much more efficient and knowledgable.

    Keep up the good work!

  11. aboleo
    Permalink to comment#

    Nacho, easy clearing is a great method, if you know how to use it and it is not as inconsistent as you might think. Chris should have mention it anyway ;)

  12. Excellent videos! Been watching for some time now. Keep it up!

  13. Ryan
    Permalink to comment#

    Re: 6:40 into the screencast: One of the easiest reasons to understand why a containing element "collapses" when floats are inside, is so that multiple paragraphs will wrap around a really tall floated image that's contained inside the first paragraph tag.

  14. Jesika
    Permalink to comment#

    Actually, IE6 is only used by approximately 20%, according to w3c. Another 26% user IE7, and a growing portion (44%) use Firefox.

    It all really boils down to who the target user is. IE6 is only a piece of the Microsoft family, a lot of people forget that IE7 comprises a little more than half of the total number of IE users.

  15. Garro
    Permalink to comment#

    Hi everyone :-)
    Great Vid !

    I was wondering if anyone can help me with something….
    Im a mac user, and i have no means of buying a pc, but i want to be able to check up on my websites on IE 6-7 etc…..

    I see on the video that it's possible… can anyone tell me how this is done?
    Do I have to run Parallels to do so? (Or something similar?)
    I currently use the browsershots.org website, but i would like to be able to see what I do on IE….

    Thanks so much for any help you guys can provide.. :-)

  16. Mattias
    Permalink to comment#

    Great video, as always. I love that you cover the more complicated stuff to the basics.

    I like to view videos on my iphone and would love to see a iphone feed of the videos. The only requirements are that the resolution is max 640×480 and it uses h264 or MP4 for video codec and aac or mp3 as audio codec.

    Either way, keep making your videos, they are really useful!

  17. Permalink to comment#

    I was just explaining clearing floats to a designer I work with. This is a great help!

    A way that I like to have a parent container wrap around floated elements is the float the container. I then set the width to 100% or to the fixed width that the container should hold, thus not allowing any elements below the container to wrap.

  18. Dan Brady
    Permalink to comment#

    Great vid Chris! Although, I have to admit I was a little distracted at ~1:26. You opened Firefox and I saw "…en nerd" in your google search and my mind began to wander. :^)

  19. Ha! I believe I was searching for what the internet considered the difference to be between a "geek" and a "nerd". I'm doing a blog design for a client with the word "geek" in the title, I wanted to maybe play off that a little.

  20. Permalink to comment#

    These screen-casts are fantastic. You've done a brilliant job of unravelling this topic Thanks.

  21. StoneGut
    Permalink to comment#

    Another great screencast – it helped me finally fixed my IE6 issues… stupid IE6.

  22. jean lyon
    Permalink to comment#

    Excellent,
    Thank you for these great lessons , great help to improve my very light html and Css knowledge
    Keep up the good work
    Jean from France

  23. Permalink to comment#

    @Garro- In the vid Chris is using VMWare which will cost you about $80 plus you will have to buy a copy of Windows. Personally I have an old Sony laptop running XP (and Ubuntu) and that's where I do all my testing for the dreaded IE.

  24. Juan
    Permalink to comment#

    WoW ! you are doing an excellent work. Thank u & continue like this

  25. Vanko
    Permalink to comment#

    How to float center an element center?

  26. Permalink to comment#

    really look one, thanks for the tutorial

  27. Permalink to comment#

    these tutorial are so cool. but somebody knows how to put a fotter like this page but whit an information too short. i have been trying whit this problem but always rest a big white space under the early mentioned footer.

  28. Great screencast! Floats are fragile things and I like the way you demonstrated float bugs and how to resolve them.

  29. mockaccino
    Permalink to comment#

    Hey, Codeweavers has a great solution that's about US$40 bucks that allows you to run some MS stuff without buying windows. Works great, that's how we check IE6. Just google it and it will come up.

  30. Misiek
    Permalink to comment#

    Great cast! Thank you!
    You look completely diffrent, than I have imagined you ;) .

  31. dbjorns
    Permalink to comment#

    Man that sure fixed my current issues! I'm new to CSS and your examples are so straight forward and easy to follow.

  32. Dana-Marie
    Permalink to comment#

    wow. I totally coincidentally sat down to watch this tutorial, and you fixed my ie6 problem! I've been avoiding having to deal with it. Didn't know about the margin-right/float-right thing. Thanks so much for throwing that tidbit in!

  33. Longmatch
    Permalink to comment#

    I have been web programmer for quite a while and just started to learn CSS to stop inlining style. Your video is wonderful and will save me a lot of time. I cannot say more thanks to you.
    Thanks

    Longmatch

  34. Grant
    Permalink to comment#

    Top stuff Chris. I come back when I get stuck on a project with IE6 layout issues. Thanks.

  35. Permalink to comment#

    Thanks! I learned all I need to know about floats here :P. I was having many many problems with IE ¬¬ and now I know how to solve them :D

  36. doriablade
    Permalink to comment#

    Great videos. Really love them. Can you write a short article about floating the sidebar to the left of the main content?

    Thanks

  37. Has anyone tried the Float (Nearly) Everything method? You can read more about it over at orderedlist.com I prefer it over the overflow method.

  38. Dillankid
    Permalink to comment#

    Just found this site and have watched 3 tutorials so far, and they’ve all helped. Amazing site, excellent work (vids and the site itself.)

  39. THANK YOU!!!

    I had not touched a website I had been working on for ages and the layout was killing me. I had always wondered why FireBug would only highlight a small portion of the div when I hovered over it and did not extend the way it should.

    It’s really hard to understand this concept, but visually seeing happening will definitely make it easier to remember in the future. Thanks again!! :-)

  40. Tom
    Permalink to comment#

    Thanks for the screencast, that was very illuminating.

  41. Mittal
    Permalink to comment#

    Thank you..

    It was very helpful to me but what if all the blocks are not of same size?

  42. vagkos
    Permalink to comment#

    i am following the screencast exactly but not firefox and chrome don’t float the div’s, they display it one underneath the other. I must be missing sth, but i cannot see it at all :(

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".