Treehouse
writes on May 30, 2011
In this 7-minute video, you’ll learn several different techniques for clearing floated elements using CSS.
This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …
- Accessibility
- Business
- CSS3
- Design
- Django
- HTML & CSS
- HTML5
- JavaScript
- jQuery
- NoSQL
- PHP
- Responsive Web Design
- Ruby
- Ruby on Rails
- SASS
- UX
- Version Control
- WordPress Theme Design
New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.
Good post but please try to avoid repeating “let’s go ahead and…” so much. It detracts from your message.
Good post but please try to avoid repeating “let’s go ahead and…” so much. It detracts from your message.
This is
good news. I must confess that I am very critical of the use of floats for
the device when it is certainly the best option.
This is
good news. I must confess that I am very critical of the use of floats for
the device when it is certainly the best option.
This is
good news. I must confess that I am very critical of the use of floats for
the device when it is certainly the best option.
This is good news.
I must confess that I am very critical of the use of floats for the device when
it is certainly the best option.
This is good news.
I must confess that I am very critical of the use of floats for the device when
it is certainly the best option.
This is good news.
I must confess that I am very critical of the use of floats for the device when
it is certainly the best option.
Yarn For Knitting
Yes, this technique is awesome without markup. but as these pseduo selectors do not worked in IE!
so, avoid using these ways.
and go this way as
and also which is considered as ugly markup way by some designers in community.
It can work in IE 6 and 7, you just have to add two extra bits to the CSS file. http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/ We use this method of clearfix on all our projects now, it works fine, and it’s beautiful.
Is it..? will give it a try : ) tagged the post
Why is anyone using floats anymore? With the ability to finally do display:inline-block reliably cross-browser, there is rarely a need to use floats anymore. The only time floats are needed any more is for their original purpose, which rarely requires float-clearing.
omigosh, didn’t know about the use of inline-block like that. I’m glad I got this post and saw your comment, thank you!
Why is anyone using floats anymore? With the ability to finally do display:inline-block reliably cross-browser, there is rarely a need to use floats anymore. The only time floats are needed any more is for their original purpose, which rarely requires float-clearing.
Where’s the advantage? With floats, you can float both left and right and you don’t have to hack letter and word spacing to get left and right margins to work correctly. A clearfix class (using the :after method) in a common base style sheet is simple and reliable.
The advantage is that the hacks are only necessary if you need pixel-precision in the widths. If the intermediate white-space is not a problem, the hacks aren’t needed at all. Using floats for layout is a hack that fills a void that no longer exists. Inline-block is purpose-built for this exact scenario. That is, allowing elements to align horizontally while still being styled like block elements. (width/margin/padding) In most layouts, the intermediate white-space is not important anyway.
Yes, I take your point about using a property that was designed for this purpose. However, in my experience the most common use-case for left-floating is a horizontal navigation bar where the intermediate white-space is a problem, so in reality both solutions end up being hacky. Also, can you do cross-browser, equal-height fluid columns with inline-block? For example:
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Consolas}
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
That’s a good post. I admit I was overly critical of using floats for layout as there are certainly cases where they are the best option. It is likely due to the sites that I’ve had to maintain where the previous developers have severely overused and abused floats to such a point where I have a visceral reaction to their usage in any fashion. From my experience, a good 90% (certainly not all) of floats could be replaced with inline-block.
Thanks for the discussion. I’m definitely going to use inline-block more often 🙂
I also enjoyed the discussion and glad you provided that post. Is it your blog?
Not my blog, just the best cross-browser CSS solution to a common problem that I’ve come across.
omigosh, didn’t know about the use of inline-block like that. I’m glad I got this post and saw your comment, thank you!