- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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.
Thanks.
So is it same as having ‘overflow:hidden’ on the parents div?
What’s the difference?
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
Great! Thanks for the tips!