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 trial

CSS CSS Layout Techniques Float Layout The Float Clearfix

Angela Dimler
Angela Dimler
7,969 Points
Posted by Angela Dimler
Angela Dimler
7,969 Points

In "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
Albert Jiménez Serrata
8,969 Points
Albert Jiménez Serrata
Albert Jiménez Serrata
8,969 Points

Hi, 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.

Angela Dimler
Angela Dimler
7,969 Points
Angela Dimler
Angela Dimler
7,969 Points

Thanks! 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.

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Maybe 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
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

From website w3c, it's said display: table, let the element behave like a <table> element!!! I'm not really understand it 100%.

Varayut Lerdkanlayanawat
Varayut Lerdkanlayanawat
Courses Plus Student 5,439 Points
Varayut Lerdkanlayanawat
Varayut Lerdkanlayanawat
Courses Plus Student 5,439 Points

So, can we use display: block/inline-block instead of table? it also makes the content behave like a real element?

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

display: 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.