(Because auto is the default width, we don??™t need
to state it in our CSS.) Of course, if the content column is this full
width, it would leave no space for the navigation column, so we add
a 140-pixel margin to the content column to create a visual space
for it.
To Float or Not To Float?
This causes the ?¬‚ oated content column to sit down the page below
the navigation column. That??™s as high as it is able to ?¬‚ oat up,
because it is now full width and the earlier-in-the-markup nav gets
dibs on the corner.
By un?¬‚ oating the content column, it returns to the document ?¬‚ ow
and sits up in the top-left corner of the page. The navigation column
then ?¬‚ oats up, also into the top-left corner, over the content div??™s
empty left margin area.
All this might be a little dif?¬? cult to grasp, but what we have done
is position both elements with their top-left corners in the top-left
corner of the containing element, body. The ?¬‚ oated nav is not in the
document ?¬‚ ow, so it sits up as high and as far to the left as it can
within the containing element. The content div is now ?¬? rst in the
document ?¬‚ ow, so it also moves into the top-left position. It??™s only
the left margin on the content area that pushes it away from this
position and prevents it from being under the navigation column.
Temporarily remove the left margin on the content area to see what
I mean.
Pages:
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196