1 Not your fault but...

…why does ala structure pages so that if you click on an example you get sent to a new page instead of seeing the example alongside the code? This is a prime example of bad interface design! They should use javascript pop-ups or css hide/shows! Religious prejudice against javascript I imagine. OMG.

posted at 09:46 am on March 8, 2011 by David Leader

2 Error in explanation of :after pseudo-element

There is a small, often made mistake in this article:
“Here, the CSS is placing a new element after our #container element… “
is not correct. The new (pseudo)element is not placed after #container, but inside of #container (after it’s current content).
According to the specs :
“The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content.”

posted at 11:39 am on March 8, 2011 by nico

3 Using clearing class instead of repeating content

I really like the solution I’ve learned from Dan Cederholm’s book, Handcrafted CSS, where he defines a class .group that you can attach to any element with floating children.

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

There are also very simple fixes for IE6 and IE7.

For the last year this is the only thing I’ve been using to manage floats and it’s working really well. I would imagine it saves time/space by not repeating the code in the CSS file for every element, but rather applying the class in the HTML.

posted at 12:01 pm on March 8, 2011 by pavelmocan

4 Excellent article

Thank you – very clearly presented and with easy-to-understand examples.

posted at 12:03 pm on March 8, 2011 by kgoeller

6

Just popped into alistapart.com after a long absence – via Jon Raasch’s site … I wanted to say a BIG thank you to Noah (& all other generous spirited souls like him who take the time to give us such great articles) – your article has just provided me with a timely reminder on the nitty gritty surrounding floats. It’s easy to forget basics when embroiled with so many of the other aspects of creating a website.

posted at 12:52 pm on March 8, 2011 by Juliet

7 Thank You for a Excellent Article

I’m looking forward to reading more articles this good at explaining. As long-standing as Floats have been – I still can use tutoring in the fundamentals.

posted at 04:45 pm on March 8, 2011 by Ron Pemberton

8 RE: div style="clear: right;"

We never need extra content in the dom to clear floats. (To say nothing of the evils of inline styles.)

You may want to try the following methods instead:

1. Apply the clear to the next natural element in your dom (it’s amazing how often people forget to try this first).

2. If that is unwieldy, “overflow: hidden;” works to clear most floats, and involves less css.*

3. :before or :after generated content as discussed before is a reasonable third option.*

* Solutions #2 and #3 will not work in older versions of IE. Applying an IE-specific property that sets “hasLayout” will clear the float.

Many people use “zoom: 1;”.

Google “hasLayout” for detail.

posted at 06:06 pm on March 8, 2011 by scottlepich

10 Great Article

I recently make a site that uses insane amounts of floats. At first I thought that they were cross browser nightmares but after more experimentation I found that they really work perfectly as long as you follow the rules.

posted at 12:15 am on March 9, 2011 by headsquare