HTML/CSS Free CSS Layouts Without Tables

Discussion in 'Webmaster Tutorials and Resources' started by SD_Ryoko, Oct 27, 2005.

  1. SD_Ryoko

    SD_Ryoko <img src="\usflag.gif" align="left"/>&nbsp; Admini Staff Member

    Ratings:
    +81 / 0 / -0
    A compilation of the templates and different CSS layout ideas that are floating around WebmasterWorld.

    This thread is a reference point only, if you wish to start a discussion or need help with any of the techniques start a new thread and refer to the template you used.

    2 Column Layout with Header and Footer - Origin
    fixed sidebar width
    fluid content width
    footer always below longest "column"
    ordered source
    flexible header/footer height
    sidebar can be on either side

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <style> 
    html, body { 
    margin:0; 
    padding:0; 
    } 
    #wrapper { 
    width:100%; 
    float:left; 
    margin-right:-180px; 
    } 
    
    #content { 
    margin-right:180px; 
    background: #ddd; 
    padding-bottom: 20px; 
    border-top: 1px solid lime; /* to stop collapsing margins in Moz */ 
    } 
    
    #nav { 
    width: 180px; 
    float: right; 
    background:#aaa; 
    } 
    
    .footer, .header { 
    background: #eee; 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
    margin: 0; 
    clear: both; 
    width: 100%; /*ie requires this or height */ 
    } 
    
    </style> 
    </head> 
    <body> 
    <div class="header"><h1>Header text here</h1></div> 
    <div id="wrapper"> 
    <div id="content"> 
    <h1>content</h1> 
    <p>..insert favaurite foo text here....</p> 
    </div> 
    </div> 
    
    <div id="nav"> 
    <h1>sidebar</h1> 
    <p>..more favourite foo......</p> 
    </div> 
    
    <div class="footer"><p>Footer text here</p></div> 
    </body> 
    </html> 
    
    3 Column Layout - Center fixed, Left/Right Fluid - Origin
    side columns are Absolutely Positioned and clear the content using margins on internal elements
    Center column fixed width
    Side columns fluid, to fill width

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <title>3 Column CSS Template - Left/Right Fluid - Center Fixed</title> 
    
    <style type="text/css"> 
    html,body {padding: 0; margin: 0;} 
    body {text-align: center; /* IE center */} 
    
    #content { 
    width: 760px; 
    margin: 0 auto; /* compliant browser center */ 
    text-align: left; /* re align text */ 
    } 
    
    .column { 
    width: 50%; 
    position: absolute; 
    top: 0; 
    text-align: left; 
    } 
    
    .left {left: 0;} 
    .right {right: 0;} 
    
    #leftcol {margin-right: 380px;background: #eee; } 
    #rightcol {margin-left: 380px; background: #ccc;} 
    </style> 
    
    </head> 
    <body> 
    
    <div id="content">Center column fluid</div> 
    
    <div class="left column"> 
    <div id="leftcol">Left column fixed width</div> 
    </div> 
    
    <div class="right column"> 
    <div id="rightcol">Right column Fluid</div> 
    </div> 
    
    </body> 
    </html> 
    
    2 Column, 100% height, with Header and Footer - Origin
    Using CSS-P and a Border to create the full stretch
    100% height on short page
    both columns stretch on longer pages

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>Two cols</title> 
    <style type="text/css" media="screen"> 
    html, body { 
    margin: 0; 
    padding: 0; 
    color: #fff; 
    height: 100%; 
    text-align: center; 
    } 
    #container { 
    position: relative; 
    width: 560px; 
    margin: 0 auto; 
    text-align: left; 
    border-left: 200px solid #f00; /* left border creates background for left column ~ colour only */ 
    background: #ff0; 
    min-height: 100%; /* this is where inheritance stops */ 
    } 
    
    /* the following changes the width per box model hack 
    and then puts in the 100% height (equivalent to min-height) for IE/Win only */ 
    /*\ hide from Mac it's not broken */ 
    * html #container { 
    width: 760px; 
    w\idth: 560px; /* should be 760 if in quirks mode */ 
    height: 100%; 
    } 
    /* end hide */ 
    
    /* trick to get compliant browsers to clear the (right) floated div if required */ 
    #container::after{ 
    content: "."; 
    display: block; 
    height: 0; 
    line-height: 0; 
    font-size: 1px; 
    clear: both; 
    visibility: hidden; 
    } 
    
    #header { 
    position: absolute; 
    z-index: 100; 
    left: 50%; 
    margin: 0 0 0 -480px; 
    padding: 0; 
    height: 100px; 
    width: 760px; 
    background: #008; 
    } 
    
    #footer 
    { 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    margin: 0 0 0 -480px; 
    padding: 0; 
    height: 50px; 
    width: 760px; 
    background: #060; 
    } 
    
    #left-col 
    { 
    position: relative; 
    margin: 0 0 0 -190px; 
    padding: 100px 0 60px 0; 
    width: 180px; 
    background: #eee; 
    color: #000; 
    } 
    
    #right-col 
    { 
    position: relative; 
    float: right; 
    margin: 100px 0 0 0; 
    padding: 0 0 60px 0; 
    width: 550px; 
    color: #000; 
    } 
    
    p {margin: 0 20px; padding: 10px 0;} 
    </style> 
    </head> 
    
    <body> 
    <div id="container"> 
    <div id="header"><p>Header<p></div> 
    <div id="right-col"><p>Lorem ipsum dolor sit amet</p></div> 
    <div id="left-col"><p>left</p></div> 
    <div id="footer"><p>footer text</p></div> 
    </div> 
    </body> 
    </html> 
    
    3 Column liquid Page Layout - Origin
    Uses Absolute positioning, suitable for NN4

    Code:
    <HTML> 
    <HEAD> 
    <TITLE>3 Column Liquid Page Layout</TITLE> 
    <META name="description" content="3 Column 'Liquid' page layout with pure CSS"> 
    <META name="keywords" content="3 column liquid page layout CSS"> 
    <style type="text/css" media="screen"> 
    .left { 
    position: absolute; 
    left: 2%; 
    width: 20%; 
    } 
    .content { 
    position: relative; 
    left: 22%; 
    width: 50% 
    } 
    .right { 
    position: absolute; 
    left: 76%; 
    top: 10px; 
    width: auto; 
    } 
    </style> 
    </HEAD> 
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"> 
    
    <!-- The LH Column --> 
    <DIV class="left" > 
    <h2>Menu?</h2><p align="justify">Menu content</p> 
    </div> 
    
    <!-- The Center Container --> 
    <DIV class="content"> 
    <div> 
    <h2>Content1</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p> 
    </div> 
    <div> 
    <h2>Content2</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p> 
    </div> 
    </div> 
    
    <!-- The RH Column --> 
    <div class="right"><h2>Menu?</h2> 
    <p align="justify">More Menu content</p> 
    </div> 
    
    </BODY> 
    </HTML> 
    
    3 Column, centered with Header and Footer- Origin
    This one uses Floats and could easily be adapted for more or less columns

    probably best on a fixed/explicit width unless you're happy with percentage width side columns.
    the background colors/effect would need to be done with a background image (so another reason for fixed width!).. but a lot of fun could be had...
    footer can't be "fixed" to bottom of page but the use of min-height (height in IE) on the #container would allow you to place it a suitable distance down a shorter page.
    all columns control footer
    can be very easily adapted to 2 columns

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Floaty 3 col</title> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <style type="text/css" media="screen"> 
    html, body {margin: 0; padding: 0; height: 100%; text-align: center; 
    min-width: 700px; 
    } 
    #bgcontain { 
    background: #eee url(shadow.jpg) repeat-y 150px 0; 
    width: 700px; 
    margin: 0 auto; 
    text-align: left; 
    } 
    
    #container { 
    padding: 0; 
    float: left; 
    width: 100%; 
    clear: both; 
    min-height: 250px; 
    } 
    
    /*\ IE/Win min height hack */ 
    * html #container {height: 250px;} 
    /* */ 
    
    #leftwrap { 
    float: left; 
    width: 520px; 
    } 
    
    #rightbar { 
    float: left; 
    width: 180px; 
    background: transparent; 
    } 
    
    #leftbar { 
    float: left; 
    width: 150px; 
    } 
    
    #content { 
    float: right; 
    width: 370px; 
    min-height: 100%; 
    background: transparent; 
    } 
    
    #footer, #header {width: 700px; margin: 0 auto; background: gold; clear: both;} 
    
    /* general */ 
    p {margin: 0; padding: 10px;} 
    
    a {display: block; color: blue; background: transparent;} 
    a:hover {text-indent: 0; color: red;} 
    a span {display: none;} 
    a:hover span {display: block;} 
    
    </style> 
    </head> 
    <body> 
    <div id="bgcontain"> 
    <div id="header"><p>header text here</p></div> 
    <div id="container"> 
    <div id="leftwrap"> 
    <div id="content"> 
    <p><a href="/">centercontent<br /><br /><span>centercontent<br /><br />centercontent<br /><br />centercontent<br /><br />centercontent</span></a></p> 
    </div> 
    <div id="leftbar"><p><a href="/">left bar<br /><br /><span>left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar</span></a></p></div> 
    </div> 
    
    <div id="rightbar"><p><a href="/">right bar<br /><br /><span>right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar</span></a></p></div> 
    </div> 
    <div id="footer"><p>footer text here</p> 
    </div> 
    </div> 
    </body> 
    </html> 
    
    2 Column, 100% height, with Header and Footer - Origin
    Using CSS-P and a "Faux Column Image" to create the full stretch
    100% height on short page - (optional)
    column stretch on longer pages
    similar to the one in msg#4

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>Two cols - using faux column image</title> 
    <style type="text/css" media="screen"> 
    html, body { 
    margin: 0; 
    padding: 0; 
    color: #fff; 
    height: 100%; 
    text-align: center; 
    } 
    
    #container { 
    position: relative; 
    width: 760px; 
    margin: 0 auto; 
    text-align: left; 
    background: #ff0; /* replave this with background image of choice */ 
    min-height: 100%; /* this is where inheritance stops */ 
    } 
    
    /*\ Give to IE/Win but hide from IE/Mac - unfortuantely it won't support either min-height method */ 
    * html #container { 
    height: 100%; 
    } 
    /* end hide */ 
    
    /* trick to get compliant browsers to clear the (right) floated div if required */ 
    #container::after{ 
    content: "."; 
    display: block; 
    height: 0; 
    line-height: 0; 
    font-size: 1px; 
    clear: both; 
    visibility: hidden; 
    } 
    
    #header { 
    position: absolute; 
    z-index: 100; 
    left: 50%; 
    margin: 0 0 0 -380px; 
    padding: 0; 
    height: 100px; 
    width: 760px; 
    background: #008; 
    } 
    
    #footer 
    { 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    margin: 0 0 0 -380px; 
    padding: 0; 
    height: 50px; 
    width: 760px; 
    background: #060; 
    } 
    
    #left-col 
    { 
    position: relative; 
    float: left; 
    margin: 100px 0 0 0; 
    padding: 0 0 60px 0; 
    width: 180px; 
    background: #eee; /* this is for illustration only */ 
    color: #000; 
    } 
    
    #right-col 
    { 
    position: relative; 
    float: right; 
    margin: 100px 0 0 0; 
    padding: 0 0 60px 0; 
    width: 550px; 
    color: #000; 
    } 
    
    p {margin: 10px 20px;} 
    </style> 
    </head> 
    
    <body> 
    <div id="container"> 
    <div id="header"><p>Header<p></div> 
    <div id="right-col"><p>Lorem ipsum dolor sit amet</p></div> 
    <div id="left-col"><p>left</p> 
    </div> 
    <div id="footer"><p>footer text</p></div> 
    </div> 
    </body> 
    </html>
    
    3 column fluid layout with header and footer - Origin
    Floated Side Columns, Margined center, all control footer
    Left/Right fixed, width center fluid.
    Source Order: left > right > center
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Site</title> 
    <link href="style/style.css" rel="stylesheet" type="text/css"> 
    <style type="text/css" media="screen"> 
    body { 
    margin:10px 10px 0px 10px; 
    padding:0px; 
    background-color:#9ECBE2; 
    } 
    #header { 
    background:#fff; 
    height:40px; 
    } 
    
    #leftcontent { 
    margin-top:5px; 
    width:200px; 
    float:left; 
    } 
    
    #rightcontent { 
    margin-top: 5px; 
    float: right; 
    width: 130px; 
    } 
    
    #centercontent { 
    margin-top:5px; 
    margin-bottom: -19px; 
    margin-left: 207px; 
    margin-right:137px; 
    } 
    
    #footer { 
    background:#fff; 
    margin-bottom:10px; 
    height:40px; 
    } 
    
    .contentdivs{ 
    background-color:#fff; 
    margin:0px; 
    padding:0px; 
    border-style:double; 
    margin-bottom: 5px; 
    } 
    </style> 
    
    </head> 
    
    <body> 
    <div id="header">Header</div> 
    
    <div id="leftcontent"> 
    <div class="contentdivs">left: this expands with content<br></div> 
    <div class="contentdivs">left: this expands with content<br></div> 
    <div class="contentdivs">left: expands with content<br></div> 
    </div> 
    
    <div id="rightcontent"> 
    <div class="contentdivs">right: this expands with content</div> 
    <div class="contentdivs">right: this expands with content</div> 
    </div> 
    
    <div id="centercontent"> 
    <div class="contentdivs">center: this expands with content</div> 
    <div class="contentdivs">center: this expands with content</div> 
    </div> 
    
    <br style="clear:both"> 
    <div id="footer">footer</div> 
    </div> 
    </body> 
    </html> 
    
     
    • Like Like x 1

Share This Page