Question

I have recently inherited a large web project. Before taking this on, I had primarily been working with applications, so some of the technology is new to me.

The css has the following class:

.group:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Lots of things all over the website have group as one of their classes. As far as I can see, this is the only bit in the css that references it.

I tried taking away the group class in some places, as it didn’t seem to be doing much. However, this caused all kinds of weird things to go wrong – for instance, colour from one element would seem to run on to the next. I don’t see why adding a period to the end of the elements is stopping this.

Could anyone elighten me?

Edit: Here is one of the places where the group class is used. If I remove it, so that the div has only the class wrapper, the whole page breaks.

<div id="header">     
    <div class="wrapper group">  
        <div class="fl">
            <a href="default.aspx">myHandle</a> |
            <a href="~/features.aspx" runat="server" id="A1">features</a> |
            <a href="~/about-businessbook.aspx" runat="server" id="A3">about</a>
        </div> 
        <asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr">
            <a href="~/loginpro.aspx" runat="server" id="lnkHome">sign in</a> |
            <a href="~/registerpro.aspx" runat="server" id="lnkAbout">sign up</a>  
        </asp:Panel>
    </div>
</div>

Answer 1

That’s more commonly known as “clearfix” – though “group” is arguably a more semantic class name, if less recognizable.

It’s a technique to “clear/contain floats”: http://www.ejeliot.com/blog/59

More information on clearfix:

• http://www.positioniseverything.net/easyclearing.html
• http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/