This technique uses the CSS :after pseudo-class
to insert a hidden bit of non-?¬‚ oated content (a period with no height) after all the other content inside that container. The
code also applies clearing to this non-?¬‚ oated content, and the container is thereby forced to enclose it. Here??™s the code:
.clear?¬? x:after {
content: ???.???;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear?¬? x {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clear?¬? x {height: 1%;}
.clear?¬? x {display: block;}
/* end backslash hack */
You can add this code at the end of a style sheet so it??™s available to your pages. (I??™ve added it to the end of the
text_n_colors.css ?¬? le in the downloads for you.) Then any time you need a container to enclose ?¬‚ oated content,
simply add the class clear?¬? x to the container, like this:
and the container will instantly enclose any ?¬‚ oated content within it. A couple of good uses of this technique are
1. To force a footer to sit below ?¬‚ oated columns (see Chapter 5 for examples of layouts with ?¬‚ oated columns). Add
the clear?¬? x class to a wrapper div around the columns, and this container will then always expand vertically to
enclose the columns, no matter how long they get. An element such as footer div that follows the closing tag of the
wrapper div in the markup will then always sit below the longest column.
Pages:
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163