Examples
- The Holy Grail 3 Column Layout
- This three column, 100 percent width layout sports a fixed width column on the left, a fixed width column on the right, a fluid center column and a self-clearing footer.
- The Classic Blog Layout
- This two column, 750 pixel overall width layout sports a fixed width left column and a self-clearing footer.
- The Multi Column Layout
- This Multi-Column, 100 percent width Layout sports one main fluid width column and two left hand columns. One left hand column is 180 pixels wide and the other is 300 pixels wide.
IM Layouts
IM Layouts is a simple CSS layout system. IM Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, this CSS Layout System has been optimized to give you the best possible search engine results. Use this CSS Layout System anywhere you wish. IM Layouts are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use this CSS Layout System to optimize your Web Development workflow. IM Layouts are done in Pure CSS, not tables.
Getting Started
I recomend using this !DOCTYPE to trigger Standards Mode in browsers with multiple rendering modes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Start using IM Layouts by using the link element to include these css source files. (or DOWNLOAD them, and put it on your own server)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>IM Layouts</title> <!-- Source File --> <link rel="stylesheet" type="text/css" href="http://www.ironmyers.com/css/restore.css"> <link rel="stylesheet" type="text/css" href="http://www.ironmyers.com/css/im-layouts.css"> </head>
IM Layouts rely on a standard "em" width, which is provided in the restore.css file. Additionally, to smooth out inconsistenccies between browsers, the restore.css file contains "reset" code, similar to Eric Meyer Reset or YUI Reset. The restore.css file also includes css code to return the browser to a familiar, and uniform, rendering state. (NOTE: restore.css is not strictly required, but it is highly recomended.)
Table of Contents
- Getting Started with the Base Markup
- Choose an Overall Page Width
- Introducing the Basic IM Layout Block
- Nesting the Basic IM Layout Block to Create More Complex Layouts
- Markup Following the Basic IM Layouts Block
- Putting It All Together
Getting Started with the Base Markup
In addition to IM Layouts, I prefer to setup my page in threee distinct layered sections. The first section, designated "hd", will contain the header (or masthead). The next section, designated "bd", will contain the main body of the web page. The last section, designated "ft", will contain the footer. These sections are not strictly required, but I will be using them throught this explanation. I highly recomend that you section you web pages like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>IM Layouts</title> <!-- Source File --> <link rel="stylesheet" type="text/css" href="http://www.ironmyers.com/css/restore.css"> <link rel="stylesheet" type="text/css" href="http://www.ironmyers.com/css/im-layouts.css"> </head> <body> <div id="doc"> <div id="hd"><!-- HEADER --></div> <div id="bd"><!-- BODY --></div> <div id="ft"><!-- FOOTER --></div> </div> </body> </html>
Choose an Overall Page Width
The id attribute of the DIV element (surrounding the header, body and footer DIV's from above) can specify the overall width of your page. IM Layouts is pre-programed with 3 typical page widths; 100 percent, 950 pixels and 750 pixels. To specify the overall page width, change the id of the surrounding DIV to: doc for 100 percent, doc950 for 950 pixels and doc750 for 750 pixels. All pages are centered.
<!-- doc - 100 percent width --> <div id="doc"></div> <!-- doc950 - 950 pixel width, centered --> <div id="doc950"></div> <!-- doc750 - 750 pixel width, centered --> <div id="doc750"></div>
Customize the Overall Page Width
In addition to the standard page widths featured above, it is easy to specify you own custom page widths. All page widths are specified in "em" to allow accurate scaling with user-initiated font sizing. To translate pixels to ems, divide the desired pixel width by 13 for Firefox and 13.3333 for Internet Explorer.
<style>
#doc-custom{
min-width:750px; margin:auto; text-align:left; /* DONT CHANGE */
width:57.69em; /* Firefox value (px/13) */
*width:56.25em; /* IE value (px/13.3333) */
}
</style>
Introducing the Basic IM Layout Block
The Basic IM Layout Block consists of three basic parts: the outer containing DIV, the content DIV's called "im-box" and the main column DIV called"im-main" .
The class attribute of the outer containing DIV designates the position and width of the sub-column. The first value designates the position of the sub-column; "im-left" for a left hand sub-column and "im-right"for a right hand sub-column. The second value designates the width of the sub-column. There are twelve pre-programmed column widths ranging from 180 pixels wide and increasing by twenty pixels to 400 pixels wide. Here is a list of the column widths: px180, px200, px220, px240, px260, px280, px300, px320, px340, px360, px380, px400. Both values are required for a complete Basic IM Layouts Block.
The basic unit of a Basic IM Layout Block is the "im-box". Each Basic IM Layout Block contains two "im-box" DIV elements. These elements contain the content of the page. They may also contain another Basic IM Layouts Block (discussed here)
The main column DIV, designated "im-main" wraps one of the "im-box" DIV elements and designates the main column. Since IM Layouts are Source Order Independent wrapping one "im-box" DIV over the other will not affect the layout.
<div class="im-left px200"> <div class="im-main"> <div class="im-box"><!-- MAIN CONTENT --></div> </div> <div class="im-box"><!-- SUB CONTENT --></div> </div>
Source Order Independence
Search Engine Optimization (SEO) is important to incorperate early in a pages design. Many search engines rank earlier content as more important than subsequent content. IM Layouts are Source Order Independent to promote Search Engine Optimization. The markup below will display exactly the same as the above markup.
<div class="im-left px200"> <div class="im-box"><!-- SUB CONTENT --></div> <div class="im-main"> <div class="im-box"><!-- MAIN CONTENT --></div> </div> </div>
Customize your Column Widths
IM Layouts come pre-programmed with twelve common sub-column widths. If these widths do not suit your needs, additional custom widths may be added. There are two recomended ways to create a custom sub-column width: download and edit the IM Layouts CSS file, or add some style markup on your page.
Download and Edit Method:
...
/* NEW SUB-COLUMN WIDTHS HERE */
.im-left.px160>.im-box{width:12.31em; *width:12.00em; *left:-12.00em;} /* left outer containing DIV value */
.im-right.px160>.im-box{width:12.31em; *width:12.00em; *right:-12.00em;} /* right outer containing DIV value */
.im-left.px160>.im-main>.im-box, .im-left.px160>.im-box+.im-main{width:12.31em; *width:12.00em;} /* for left hand columns */
.im-right.px160>.im-main>.im-box, .im-right.px160>.im-box+.im-main{width:12.31em; *width:12.00em;} /* for right hand columns */
/* Reset Bad margins - DONT TOUCH OR MOVE */
.im-left>.im-box+.im-main>.im-box{margin-left:0em;}
.im-right>.im-box+.im-main>.im-box{margin-right:0em;}
Added Style Markup Method:
<style>
/* NEW SUB-COLUMN WIDTHS HERE */
.im-left.px160>.im-box{width:12.31em; *width:12.00em; *left:-12.00em;} /* left outer containing DIV value */
.im-right.px160>.im-box{width:12.31em; *width:12.00em; *right:-12.00em;} /* right outer containing DIV value */
.im-left.px160>.im-main>.im-box, .im-left.px160>.im-box+.im-main{width:12.31em; *width:12.00em;} /* for left hand columns */
.im-right.px160>.im-main>.im-box, .im-right.px160>.im-box+.im-main{width:12.31em; *width:12.00em;} /* for right hand columns */
/* Must include this to repair wacky margins */
.im-left>.im-box+.im-main>.im-box{margin-left:0em;}
.im-right>.im-box+.im-main>.im-box{margin-right:0em;}
</style>
Nesting the Basic IM Layout Block to Create Complex Layouts.
IM Layouts may be nested to create complex multi-column layouts (like this). To nest IM Layouts, insert a Basic IM Layout Block in another Basic IM Layouts' main "im-box". Again, Source Order is Independent; even with nested IM Layout Blocks.
NOTE: It is possible, but not recomended, to put a Basic IM Layout Block in the sub "im-box". However, if the sub "im-box" is not wide enough for the nested Basic IM Layout Block, unexpected results may occur.
<div class="im-left px200"> <div class="im-main"> <div class="im-box"> <div class="im-right px200"> <div class="im-main"> <div class="im-box">CONTENT</div> </div> <div class="im-box">CONTENT</div> </div> </div> </div> <div class="im-box">CONTENT</div> </div>
Markup Following the Basic IM Layouts Block
If you wish to add any markup after the IM Layout block you must wrap it in a DIV with the class attribute set to "im-left", otherwise subsequent content may bleed together with the IM Layout content.
<!-- IM LAYOUTS BLOCK --> <div class="im-right px200"> <div class="im-main"> <div class="im-box">CONTENT</div> </div> <div class="im-box">CONTENT</div> </div> <!-- SUBSEQUENT MARKUP --> <div class="im-left"><!-- SUBSEQUENT CONTENT --></div>
Putting It All Together
Here is a full working example of the markup needed to create a 750 pixel wide layout with a 240 pixel right hand column, with both a header and a self-clearing footer. Easy as Pie!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>IM Layouts</title> <link rel="stylesheet" type="text/css" href="http://www.ironmyers.com/css/im-layouts.css"> </head> <body> <div id="doc750"> <div id="hd"><!-- HEADER --></div> <div id="bd"> <div class="im-right px240"> <div class="im-main"> <div class="im-box"><!-- MAIN CONTENT --></div> </div> <div class="im-box"><!-- RIGHT COLUMN --></div> </div> </div> <div id="ft"><!-- FOOTER --></div> </div> </body> </html>
,