Tuesday, March 16, 2010

CSS example: 100% height, fluid/min width layout


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:
  1. centered content
  2. 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
  3. you can make a faux 100% height left col (easily made right if you want, but why would you?) by adding an image
  4. optionally this left col can go past the footer, so the footer appears to be only in the main content
  5. 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: