Confused about clearfix and 'Holy Grail' layout

HTML & CSS
1

Hey SitePoint,

I just came across a few articles on the Holy Grail layout and had a few general questions about it as it relates to floats and other things. (http://alistapart.com/article/holygrail)

  1. Why use clearfix hack with a lot of extra markup when overflow: auto seems to work perfectly. It even keeps the margins from collapsing (the reason, from what I understand, that the :before selector is included in clearfix). I tried looking up differences on google and I couldnt really find a definitive answer other than super old browsers dont support that fix, which is why display: table is usually included in clearfixes.

  2. A major issue and concern with the Holy Grail layout is having columns in a row expand height to the tallest column in the row. A fellow sitepoint member helped me get that working one time by simply using display: table and display: table-cell to achieve this. Lets you avoid using actual tables so site spiders and handicap readers dont think the divs are tables and cells but just display them as such. Any problems doing this? Havnt seen a single other person show this in an article. I always find long winded and complex solutions to this problem.

  3. Another major issue that requires massive workarounds is having the ‘main’ div holding all your content come first in your markup for SEO purposes. How much does this really effect things? I was under the impression that I should mark up my pages as it makes sense for the document, and its very counter-intuitive to have a 2-1-3 ordered markup to move things around with the CSS to achieve the 1-2-3 layout once the page is loaded.

My point is, the Holy Grail layout and floats are seen a lot and I just dont want to pick up bad habits along the way as a developer. If I shouldnt be using overflow: auto or display: table/table-cell then I would drop them immediately as long as I knew why I was doing so.

So how would you go about getting the Holy Grail layout? What do you guys use for float issues? I use a CSS grid system that has clearfix baked in or overflow: auto when outside that system

1 Like
2

That approach has pretty much gone the way of the dodo bird (it is from 2006, which is centuries old in the tech world).

This approach is more modern (uses flexbox) https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

1 Like
3

Thats one of the articles I JUST read! Seems way more simple. As for the clearfix thing, it seems to me that if you dont need flexbox, and youre floating something within a div, using overflow: auto works on modern browsers. Wondering what the consensus is.

4

My personal opinion is to avoid floats as much as possible.

5

If you need visible overflow (e.g. a drop down menu, modal, popup or a select element that may poke out of a div) then you can’t use the overflow method (which incidentally was invented by me way back then because the overflow will hide your content if it sticks out.

The overflow method (overflow other than visible) creates a new block formatting context and in that context will contain child floats automatically. There are other elements that will do this such as display:table-cell, display:inline-block, absolute elements and of course floats themselves. They all create block formatting contexts and will automatically contain child floats.

The clearfix method is basically a method of putting an element at the end of the div and then setting it to clear:both (as if you had put real html in the and assigned clear:both to it as we used to do in the bad old days). The clearfix method is a good method to use when you have visible overflow to contend with.

Margin-collapse is another question and more of a side issue to containing floats and would require a post on its own to explain but Thierry has already done that.

I have been using the display:table and display:table-cell approach for years now and never run into a single issue with it. I have coded hundreds of sites using this method and indeed use similar for my sticky footer approach.

As long as you don;t want to support ie7 and under then don’t use floats for three column layouts any more. Some people have trouble putting gutters between the columns when using display:table but the answer is simply to use border-spacing. It’s as simple as that.

The behaviour of tables and table-cells has been around since the birth of the browser and is well defined by browsers so you get a very robust layout that just won’t break unless you do something really stupid.

The added benefit of the display:table approach is that you don’t need to supply width to the center column and you can let it just take up space. You can’t do this easily with floats unless you use exact percentages and then you risk things overflowing.

There is little proof that having content high up the html increases SEO. Search engines dig pretty deep into your html and will build up a good picture if you have well constructed content. It is more important to concentrate on structure and content that on some mysterious SEO.

Notwithstanding the above moving content around is good for mobile and for logical presentation so flexbox is ideal for this. In flexbox you can change the order of elements through the CSS but it does need care as the tabbing order is altered and can be disconcerting. Therefore only change order when it really matters.

Flexbox can do the same things as display:table/cell (more or less) and has good support in modern browsers but does take a lot of getting used to. There is a consensus of opinion that you shouldn’t use flexbox for everything but in smaller doses where you need its special qualities.

I rarely use floats as columns these days and either use display:table or flexbox approach. I haven’t needed a clearfix in months.

3 Likes
6

Thank you very much for an informed and well constructed response. For some reason, lately on this site iv been getting responses that are basically, "Read this noob: link to the css MDN documentation when I clearly defined a specific syntax question or whatever lol. Also when using the technique you mentioned for the gutters on divs using display table-cell, I couldnt figure out if there was a way to only set border spacing for particular borders and not others. For instance having the margins/padding between the viewport and the outside-most columns be collapsed or smaller than the gutters inbetween the inside walls of the columns

7

Unfortunately that is a drawback and you can only specify horizontal or vertical borders (or both) but not individual cells.( border-spacing: 10px 0;/* border-spacing: horizontal vertical */)

The border-spacing puts the spacing inside the columns but also outside the columns so that does reduce the space between the table and the edge of the window (or parent container). Most times you can just drag the parent wider with negative margins by the amount that you set on the border spacing and then all is well.

Remember you only need border-spacing if you have background colours and borders that need to be shown to equalise. If not just put your margins on the inner content instead.

Flexbox can also be tricky to get consistent margins also.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.