Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Clearfix

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #33557
    erin027
    Member

    I want to clear float divs by using ‘clearfix’ class but I can’t get it right.

    Here is a mockup(image) how I wanted to be done:
    http://email-gallery.com/examples.jpgYour text to link…

    Here is a HTML+CSS that I did:
    http://email-gallery.com/clearfix-css.htm










    div 2 div 2 div 2 div 2 div 2 div 2 div 2 div 2 div 2 div 2


    div 3 div 3 div 3 div 3 div 3 div 3 div 3 div 3 div 3 div 3 div 3



    Simply, if I use

    tag in between div2 and div3, it works correctly, but I wanted to use ‘clearfix’ class. Help! It seems like I am not understanding ‘clearfix’ class correctly. Please… any advises will be a great help!

    #83642
    wolfcry911
    Participant

    I think you’ve misunderstood the purpose of the clearfix ‘hack’. What you want to use is a simple clear:left (or both); on div3. The clearfix is applied to parents of floating children to contain them.

    #83643
    erin027
    Member

    Thanks.
    So is it same as having ‘overflow:hidden’ on the parents div?
    What’s the difference?

    #83648
    wolfcry911
    Participant

    yes, it is the same in that they both will contain the floating children. There are several ways to contain floats – the clearfix method and overflow: hidden (or auto) being two of them. Overflow: hidden; is my go to method but there are (very seldom) times when you don’t want the overflow on the parent to be hidden; and overflow: auto; could cause problems in older browsers (really not a problem any longer).

    Just be aware that there are multiple ways to contain the floats and no one way is perfect 100% of the time

    #83650
    erin027
    Member

    Great! Thanks for the tips!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.