Applet Orchard

CSS Floats – Understanding & Clearing Floats Tutorial

[ad_1]
In this CSS tutorial we take a look at how the float property affects the elements it is applied to, and also its surrounding and parent elements. Check out my “Get a Developer Job” course:

Link to “clearfix” CSS to copy and paste:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:

Posted

in

by

appletorchard

Tags:

Comments

32 responses to “CSS Floats – Understanding & Clearing Floats Tutorial”

  1. Shivang Trivedi Avatar
    Shivang Trivedi

    Thanks for making a great video!!! 🙂

    Reply
  2. Dragon Lover Avatar
    Dragon Lover

    What text editor are you using? Also couldn't you just hide the paragraph element?

    Reply
  3. Richard Claus Avatar
    Richard Claus

    AAAAaaa you scared me!

    Reply
  4. Kimberly Noble Winslow Avatar
    Kimberly Noble Winslow

    Thank you for your tutorials! Seeing these elements in action is very helpful.

    Reply
  5. Pierre F Avatar
    Pierre F

    Total waste of time. @6:50 he basically just says to copy his code

    Reply
  6. struestorystudios Avatar
    struestorystudios

    Margin doesnt seem to work for my lined up pictures, help me asap pls!

    Reply
  7. Rose Power Avatar
    Rose Power

    OMG I love you for this video.

    Reply
  8. Its-me92 Avatar
    Its-me92

    I have a question is that part of clearfix

    /* End hide from IE-mac*/
    /* @end*/

    is necessery? What does that @end mean?

    Reply
  9. gysgogo Avatar
    gysgogo

    this channel video is quality

    Reply
  10. Sandeepan Nath Avatar
    Sandeepan Nath

    I have watched a lot of online tutorial videos, and I must say that your way of presentation, the flow, is probably the best I have seen.

    Reply
  11. Hashim Hamza Puthiyakath Avatar
    Hashim Hamza Puthiyakath

    sir,
    you told, to clear floating, adding an extra <p> </p> "is not semantic" and "it is not quick and easy to code."

    and you advocates "clearfix" method.

    sir, is there any problem (other than you mentioned) if we add extra element ?

    if i find adding extra element easier and quickier, can i follow that method ?
    ( because of poor structuring – I am study webdesign only through youtube and other articles available in internet- i feel difficult to decide to which parent element i sould add clearfix class. often it cracks the layout because my structure is not right.

    Note : clearfix method in the navigation area was handy.

    hope you will reply,
    thank you

    Reply
  12. Summer Barton-Taylor Avatar
    Summer Barton-Taylor

    Great stuff here!

    Reply
  13. Ftujio Avatar
    Ftujio

    The audio is floated to the left

    Reply
  14. Rajiv Verma Avatar
    Rajiv Verma

    One of the best tutorial videos I have watched. Would love to join your Udemy course. Two questions please. 1. Do you cover responsive menu in the course? 2. When too many video on youtube have free tutorials, why should I pay for joining the Udemy tutorial?

    Thanks for your kind support.

    Reply
  15. Milind Bhatt Avatar
    Milind Bhatt

    Gr8 tutorial…Much helpful !

    Reply
  16. punjala viswanatham Avatar
    punjala viswanatham

    superb video on Float and clear…. Thanks

    Reply
  17. Andres Guerra Avatar
    Andres Guerra

    Excellent video. And the clearfix code, probably the most useful piece of code for a web developer

    Reply
  18. SHachar Goldberg Avatar
    SHachar Goldberg

    Hey,
    Your video helped me a lot!
    but why not just adding the "clear" dec to the footer? doesn't it solves the problem most of the time?

    Reply
  19. phillip ransburg Avatar
    phillip ransburg

    I know this is 2011 but in 2014-–>.container{overflow:none;} Done, easy, simple and if you have a background color, make sure you set the height: 100%. There you go. Oh yeah, but in order to create a simple sidebar, create two divs, one as your main body and the other as your side bar. Float the main body left, and the side bar right. Of course use your margins and padding when necessary. 

    Reply
  20. Zackery G Avatar
    Zackery G

    This is an excellent tutorial for designer new to CSS. Excellent job. Perhaps I haven't come across it yet, but a suggestion for a tutorial would be a more in depth float tutorial. Perhaps floating left AND right and explaining to you float left more than one element. For instance, three div tags with floated left will make a three column layout. I remember when I was learning to use floats that MOST of the tutorials I needed were perhaps a little more in depth than this particular tutorial. None the less, you speak very clearly and explain things well. I look forward to watching more of your tutorials! 

    Lastly,@MickJnr7 or anybody else having this question, the answer is no. You do not need Text Mate and if you are using a Windows PC, you really can't use TextMate anyways. It is a Mac application. You CAN use notepad, but there are PLENTY of free text editors out there. Notepad++ and Aptana Studio are great examples. 

    Cheers!

    Reply
  21. ankit Avatar
    ankit

    future request: how to stretch a div 100% height and width

    Reply
  22. Elizabeth G Avatar
    Elizabeth G

    What is the difference with the sidebar and using aside?

    Reply
  23. Liam Bodman Avatar
    Liam Bodman

    Thanks! Saved me much frustration 😉

    Reply
  24. Mehedi hasan Avatar
    Mehedi hasan

    thanku loving and kissing u

    Reply
  25. Iknowbetterthanthat Avatar
    Iknowbetterthanthat

    Very clear instructions, this really helped me!

    Reply
  26. Musicogenital Avatar
    Musicogenital

    So fucking smart!

    Reply
  27. Deniz T. Avatar
    Deniz T.

    Brillant, that's much easier. Thanks.

    Reply
  28. Deniz T. Avatar
    Deniz T.

    Why don't you just increase the height of .container in css? That solves box issue easily for me.

    Reply
  29. Airborne Avatar
    Airborne

    good tut, thank you

    Reply
  30. Airborne Avatar
    Airborne

    I'm deaf on my right ear

    Reply
  31. Thomas Rad Avatar
    Thomas Rad

    The good news is your fired the bad new is you got one week, one week to regain your jobs

    Reply
  32. slapmyfunkybass Avatar
    slapmyfunkybass

    personally i don't like the clear fix idea – it's quite a bit more code than the clear:both property; also, you could have just used an empty div at the end and applied the clear element to that.

    thanks for the video anyway…

    Reply

Leave a Reply

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