#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. User Avatar
    Scott GM
    Permalink to comment#

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

    Thanks

  2. User Avatar
    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. User Avatar
    Morten
    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. User Avatar
    Nathan C
    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. User Avatar
    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. User Avatar
    Andres
    Permalink to comment#

    @Nathan C

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

  7. User Avatar
    Andres
    Permalink to comment#

    i guess ie6 isn’t worth it anywho..

  8. User Avatar
    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. User Avatar
    Nacho
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    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. User Avatar
    michael soriano
    Permalink to comment#

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

  13. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Levi
    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. User Avatar
    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. User Avatar
    chriscoyier
    Permalink to comment#

    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. User Avatar
    johno
    Permalink to comment#

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

  21. User Avatar
    StoneGut
    Permalink to comment#

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

  22. User Avatar
    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. User Avatar
    Mike
    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. User Avatar
    Juan
    Permalink to comment#

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

  25. User Avatar
    Vanko
    Permalink to comment#

    How to float center an element center?

  26. User Avatar
    Moksha
    Permalink to comment#

    really look one, thanks for the tutorial

  27. User Avatar
    mau
    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. User Avatar
    Brad Strickland
    Permalink to comment#

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

  29. User Avatar
    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. User Avatar
    Misiek
    Permalink to comment#

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

  31. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Grant
    Permalink to comment#

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

  35. User Avatar
    Combus
    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. User Avatar
    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. User Avatar
    Jared Christensen
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    Christian Saborío
    Permalink to comment#

    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. User Avatar
    Tom
    Permalink to comment#

    Thanks for the screencast, that was very illuminating.

  41. User Avatar
    Mittal
    Permalink to comment#

    Thank you..

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

  42. User Avatar
    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 :(

  43. User Avatar
    misterjuli
    Permalink to comment#

    Cool!
    I’m so happy watching this tutorial. Finally, I understand what the float is. It’s completely clear direction. You’re great teacher. I like it. Thanks.

  44. User Avatar
    Siraj Mahmood
    Permalink to comment#

    Absolutely Fantastic !
    I’m searching about float in css and found your site. Beneficial and understandable screen-cast.
    We are glad to see your attractive site. I appreciated your teaching and learning stuff.
    Thank you !

  45. User Avatar
    kksilvery
    Permalink to comment#

    Cool work,it helped me finally fixed my IE6 issues on my alltechmess. Thank you for sharing an important article.

  46. User Avatar
    DshxD
    Permalink to comment#

    great tutorial , enjoyed learning here , Thanks a lot :) !!!

  47. User Avatar
    Heather Herrington
    Permalink to comment#

    Thank you so much for this tutorial! I’ve been struggling with floats and this finally turned on the light bulb over my head.

  48. User Avatar
    Beatrix
    Permalink to comment#

    Great. Thanks.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag