(CSS) Clearing a float container (:after method) - lamebollock

Thu, 13 Jan 2011 03:38:11 GMT

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element happens to possess the MS-only quality called hasLayout. This site has other methods of achieving the same effect, [http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/](http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats//) , depends on your scenario.

(CSS) CSS pseudo + adjacent selectors - davebowker

Mon, 05 Jan 2009 08:54:23 GMT

Figure 5. Selecting the first-child LI elements that descend from a UL element. By combining the first-child pseudo-class with the adjacent-sibling selector, it's possible to pick children other than the first one. For example, you might want to always style the third child of any element. That could be accomplished by writing: *:first-child + * + * {color: green;} It isn't necessarily the most common thing you'll ever try to do, but you never know. Just as an example, you might want to make the first list-item in a list boldfaced and red, the second boldfaced, and the third one gray. The styles would be: LI:first-child {font-weight: bold; color: red;} LI:first-child + LI {font-weight: bold;} LI:first-child + LI + LI {color: gray;} Again, it probably isn't something you've been waiting years to be able to accomplish, but now the capability is there for those moments when you need it.

Snipplr

(CSS) Clearing a float container (:after method) - lamebollock

(CSS) CSS pseudo + adjacent selectors - davebowker