I will
use this technique of placing an inner div in a column in many of the
page layouts in the next chapter, so make sure you understand the
concept illustrated by these last three screenshots before moving on.
The takeaway from this box model discussion is that, with all modern,
standards-compliant browsers, when you set the width of an
element, you are really setting the width of the content within it, and
any padding, borders, and margins you set increase the overall space
the element occupies over and above the speci?¬? ed width value.
Now let??™s look at the other key technique you need to understand
when it comes to creating CCS-based layouts??”?¬‚ oating and clearing.
After all I??™ve said about avoiding presentational markup, you might be wondering
why I am adding markup just to achieve a presentational effect. My answer would
be divs, unlike tables for example, do not visually affect the layout unless we style
them, so I think it is a worthwhile trade-off, especially for those learning CSS, who
have enough to think about without pulling out a calculator every time they change
the borders or padding on an element.
FIGURE 4.14 By padding an inner
div, the width of the column, as
de?¬? ned by the outer div, remains
unchanged.
STYLIN??™ WITH CSS - CHAPTER 4 114
Floating and Clearing
Another powerful technique you can use to organize your layout on
the page involves combining ?¬‚ oating and clearing, using the ?¬‚ oat
and clear properties.
Pages:
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157