
I was starting a new project and thinking about the CSS. I'll often copy from some old project but it bothered me that I didn't comment my old projects enough to remember the various sources I used to cobble together the layout in the first place, or what the basic layout had.
So I thought it would be good to throw some basic samples up here for future reference. I'll use the tag CSSlayout so that they can all be pulled up together.
Example 1:
This layout has:
- centered content
- a main div that has a fluid width, but also a min-width so it will expand but not shrink past a certain size; NOTE min-width breaks on IE < 7
- you can make a faux 100% height left col (easily made right if you want, but why would you?) by adding an image
- optionally this left col can go past the footer, so the footer appears to be only in the main content
- 100% height so when there's very little content the screen will still be filled
code:
/* commented backslash hack \*/
body {text-align:center}/* centre for ie5.+*/
html, body{
height:100%;
background: #8b2d47;
font: 0.9em georgia;
color:green;
}
/* end hack */
body {min-width:916px;}
* {margin:0;padding:0}
#outer{
min-height:100%;
height:auto;
background:#f3f7ff; /* url(bg.gif) repeat-y 0 0 <-- for faux 100% high column */
width:78%;
margin:0 auto;
min-height:100%;
position:relative;
text-align:left;
}
* html #outer{
height:100%;
width:74%;
}
#header {
height:90px;
background:#fff;
}
#clearfooter{clear:both;height:50px;width:100%}
#footer {
width:100%;
position:absolute;
bottom:0;
left:0;
height:50px;
background:pink; /* url(bg.gif) repeat-y 0 0 <--- add this in and you'll extend the left col vertically over the footer */
}
#footer p {
margin:0 0 0 230px;
padding:0.3em 0.5em 11px 50px;
border-top:1px solid #b99032;
background:#f3f7ff url(../images/logo_pitt.gif) no-repeat 3px 3px;
}
#content {
padding-top:12px;
margin-left:200px; /* assumes left col */
font-size:0.9em;
}
No comments:
Post a Comment