Web Development Tip #1

by GarryHillton - 1/14/13 3:29 AM

Clearing floating elements is part of the grind for most web developers. We can still get caught out though. For example, how do you clear floated list elements without setting a height? "The answer to this little dilemma is actually really simple," says Rhys Little of Plug and Play, "Just add the following two CSS properties to any list container with floated list elements."
display: block;
overflow: hidden;
If you check the list container now with any DOM inspector you'll find that the height attribute has automatically been calculated - and that fixes the issue.