HTML and CSS Reference
pseudo-element. If you need your float-based layout to display properly in web browsers more than a
decade old you might need to choose an alternative method for clearing floats.
Versions 6 and 7 of Internet Explorer for Windows didn't support pseudo-elements or
generated content, so this float clearing technique doesn't work for those versions.
Unfortunately, those outdated versions are still in use in some corners of the Web, so
you'll often have to make some special concessions for them (though their numbers are
dwindling as people and companies gradually update their software).
However, those versions of IE included a mysterious and proprietary concept in their
rendering engines called “hasLayout.” A container block that “has layout” will
automatically expand to contain floating contents. You can learn more about the
weirdness of hasLayout, what it does in IE 6 and 7, and how to invoke it to compensate
for numerous CSS layout bugs at satzansatz.de/cssd/onhavinglayout.html
A float-based layout seems simple enough once you get the hang of it, but there are a few downsides as
well. A floating element is taken out of the normal flow of content and shifted to one side, but it doesn't
move up or down; the floated element's top edge will remain more or less where it would have been if it
wasn't floating. Sometimes you'll have to order elements in your document according to where they should
wind up when they float, which may not be ideal; you probably don't want a sidebar appearing before the
main article, for example. But with a bit of skill and craft, the float property is one of the best layout tools
at your disposal.
In addition to float , the position property is the other key layout tool in your CSS toolbox. With the
accompanying offset properties left , right , top , and bottom , you can move a positioned element
anywhere on the page and place it exactly where you want it to be. But like floating elements, positioned
elements have a few idiosyncrasies that you'll need to become familiar with.
The position property accepts four values: static , relative , absolute , and fixed . The default value
is static , which simply means the element has no special positioning, and appears on the page
according to its place in the normal flow. Because static is the default, automatically assigned to every
element, you'll rarely need to declare it in your own style sheets except to override a different position
value declared elsewhere. Adding position:static to a rule simply resets the element back to its
normal place in the flow. The other positioning schemes—relative, absolute, and fixed—are where it starts
to get interesting.
When an element's position is relative, it's initially laid out according to the normal content flow. From there
you can shift the element to a different position with the left , right , top , or bottom offset properties, any
of which will take a percentage or a length as their value, or auto to revert to the normal flow position with