It would not be able to change size if it did, so its natural
tendency is to expand to the width of the layout. Of course, if it did
that, there would be no room for the side columns, so we apply
margins equal to the width of the side columns to push the content
column in on each side. The problem is that, even after doing this,
without some extra magic, the right column would sit with its left
edge aligned to the right side of the container and therefore be in
the wrong location or, if the browser window was narrow, be offscreen.
Ryan Brill??™s insight was to set a negative margin on the two-column
wrapper, which would suck the right column back into the page
and keep its right edge aligned with the right edge of the container.
It??™s a thing of beauty. Every time I create this layout, I think I get a
little closer to understanding how it actually works! What I do know
is that this is probably the most useful page layout of them all??”as
they would say in England: ???Absolutely brill!???
Making All the Columns the Same Length
Unlike table-based layouts, div-based layouts do not result in all the
columns being the same length. Divs are simply as tall as the content
they contain and expand vertically as more content is added.
It can be more visually pleasing to have all columns go full height,
especially on long pages where the side columns would otherwise
move up off-screen as the user scrolls down, leaving empty space
on each side of the content.
Pages:
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202