2em;
}
#content_inner {
margin:2em 2.5em 0em 2em;
padding:0;
}
#promo_inner {
margin:1em 1.2em;
}
#footer_inner {
text-align:center;
}
full width by default
prevents oversize elements from
breaking the layout
BASIC PAGE LAYOUT 173
As I mentioned at the top of the chapter, absolutely-positioned elements
like these columns are out of the document ?¬‚ ow, so they can??™t
push a footer down like the columns in the ?¬‚ oated layouts we??™ve
looked at. Unless we resort to using some JavaScript and adding
several classes to the markup (see http://www.shauninman.com/
archive/2004/05/14/clear_positioned_elements), there is a small
compromise that we need to make with respect to the footer. If we
want it to always be positioned at the bottom of the layout, it cannot
be full width and can only be the width of the content column,
as illustrated by Figure 5.17. I don??™t think that??™s a big deal, especially
if we use NiftyCorners to match up the column lengths and give a
nice, ?¬? nished look to the layout. To move the footer into the content
area, I placed the footer markup inside of the main content div but
outside of the content inner div. This allows the footer to extend the
full width of the content area and not be affected by the padding on
the content??™s inner div.
The key piece of code in this CSS is the position:relative on the
mainwrapper div.
Pages:
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214