Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAngela Dimler
7,969 PointsIn "The Float Clearfix" video, Guil displays the header.group as a table. Why?
What exactly does displaying the header as table do to the child elements?
4 Answers
Albert Jiménez Serrata
8,969 PointsHi, frist time in the forum. I feel shy. Well, back to your question, when you create a clearfix, you use "display:table" because 'This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse.' You can view more in detail in the link that appear in notes in Guil's lesson "The Float clearfix", even though I published for you. Link : http://nicolasgallagher.com/micro-clearfix-hack/ . If this helped you, please let me know, but if not, let me know as well.
Andrew Stelmach
12,583 PointsMaybe by giving the pseudo element 'display: table;' it means the pseudo element is a block element? If that's true, it would therefore take-up the full line-width, which means that it would be impossible for anything to wrap around it on either side.
But this seems like overkill to me, because you could achieve the same effect simply by giving something a 'clear: left;' rule? Maybe it's 'belt and braces'.
But I think there must be something else going on. Maybe it's something to do with margin collapses or something. I really don't know. It would be good to get an answer on this. Guil didn't explain it in the video (the video's are still GREAT though ;-)
Sreng Hong
15,083 PointsFrom website w3c, it's said display: table, let the element behave like a <table> element!!! I'm not really understand it 100%.
Angela Dimler
7,969 PointsThanks for trying!
Varayut Lerdkanlayanawat
Courses Plus Student 5,439 PointsSo, can we use display: block/inline-block instead of table? it also makes the content behave like a real element?
Ryan Boone
26,518 Pointsdisplay: table
is used to prevent collapsing margins between two stacked, clear-fixed containers. http://fuseinteractive.ca/blog/understanding-humble-clearfix#.V6H_p2Wof6s
display: block
can also be used, but it will not prevent collapsed margins.
Angela Dimler
7,969 PointsAngela Dimler
7,969 PointsThanks! My first time too. I think I get it, but I might have to try it in real-time on an actual project to see it in action. I bookmarked the micro-clearfix-hack site.