)
However, if you want to add pixel-based padding values, things become a little
more complex, because there??™s no way of specifying something like 39% - 20px for
a width. The most sensible workaround is to use nested divs: add a content div
within each of the two existing divs, and then set padding for those nested divs to
a pixel value. In HTML, you end up with the following:
You then apply a padding value to .columnContent in the CSS.
PAGE LAYOUTS WITH CSS
287
7
Placing columns within wrappers and clearing
floated content
The heading of this section is a bit of a mouthful, but it makes sense at this point to combine
the two things it mentions??”placing columns within wrappers and clearing floated
content??”because once you??™ve started working with columns, that??™s what you??™ll likely next
have to do. Placing columns within a wrapper enables you to position the overall layout
(for example, centering it within the browser window) and restrict its width to a set size in
pixels or a liquid measurement. Clearing floated content is an important concept to
understand, because floated content appears outside of the normal document flow; subsequent
content then wraps around floated content. Therefore, float an object left and
subsequent content will stack to its right. Also, backgrounds don??™t appear behind floated
content if it isn??™t cleared, because browsers consider floated elements to technically take
up no height.
Pages:
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382