See later in the chapter for dealing with this issue by creating
scrollable areas for page content.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
272
Creating a boxout in CSS is mostly done by floating a div.
The float property
Mastering the float property is key to creating CSS-based web page layouts. It enables
you to float an element to the left or right of other web page content, which then wraps
around it. This enables you to do away with ugly hacks such as fixed-width tables aligned
right to create a boxout.
The benefit of using the float property over older methods is the ability to control a
styled boxout??™s appearance site-wide from an external CSS file (and to control the cascade,
in order to amend the appearance of elements within it). Structurally, the page is also
more logical.
PAGE LAYOUTS WITH CSS
273
7
Required files Files from boxout-starting-point in the chapter 7 folder as a
starting point.
What you??™ll learn How to create and style a boxout in CSS.
Completed files boxout-complete in the chapter 7 folder.
As mentioned earlier, boxouts can be handy on web pages
for displaying ancillary content simultaneously with the
main text (rather than having supporting text following the
main content). Like any other div, a boxout can also be
styled, which is what this exercise will show how to do.
Steps 1 through 3 show you how to create a basic, plain
boxout, and step 4 onward shows how to style it.
Pages:
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372