If you don??™t, you??™ll have a hard time trying to
match up column widths in percentages and margins in pixels.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
290
#wrapper {
width: 700px;
margin: 0 auto;
background: #bbbbbb;
}
#divOne, #divTwo {
float: left;
width: 300px;
}
#divOne {
margin-right: 20px;
}
Upon previewing the amended page, you??™ll see that the subsequent content stacks
to the right of the floated content; also, the background color for the wrapper
doesn??™t extend behind the floated content. Both of these issues can be fixed by
clearing the floated content.
Note that Internet Explorer??™s behavior is different from other browsers here: the
wrapper isn??™t being collapsed, so the background extends fully, and the paragraph of
text added after the wrapper doesn??™t flow around the floated divs, presumably
because the wrapper isn??™t collapsing.
PAGE LAYOUTS WITH CSS
291
7
2. Clear the floated content. There are two main methods for clearing floated content,
both of which are worth having in your arsenal. The first was initially developed
by Tony Aslett of CSS Creator (http://csscreator.com) and subsequently
expanded by the folks at Position Is Everything (see www.positioniseverything.
net/easyclearing.html for a full overview of the technique). First, add a class
value of clearFix to the container of the floated content (the wrapper div, in this
example), and then add the following rule in CSS:
.
Pages:
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385