4-col and/or 5-col simple layouts: Examples to learn from?

**mhulse** · Jun 19, 2006, 03:29

Hi,

I am looking for a few good/bulletproof examples of four and five column fixed-width (floated?) simple/basic CSS layouts... no frills or gimmicks (i.e. faux columns, negative margins...)

I have a pretty good idea how to tackle this type of layout (fixed-width, all floated left, account for IE broken box model), but I would love to see some simple/solid examples before I completely re-invent the wheel.

Links, suggestions, thoughts, RTFM's... all appreciated.

TIA!
Cheers,
Micky

**all4nerds** · Jun 19, 2006, 04:08

Hello

any width, any column model
parameters .l .ll width's of colums .w width (fixed 100% 80%)
and for FF NS Moz OP left right margin's head+body .q{margin:0 20em 0 20em; }

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" lang="en">
<head>
<title>Basic 3 Column Bare </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#a2a2a2;}
	
	div{font-size:1em;}
	
	.wra{
	margin:0 auto;
	background:#b7b7b7;
	}
	.w{width:64em;margin-top:.5em;}
	
	.he{background:#ff8c00;}
	
	* html .he,* html .fo,* html .na,* html .r{ height:1%;}
	
	.na{background:#fbfbfb;}
	
	.l,.ll{ width:10em;}
	.l{float:left;}
	.ll{float:right;} 
	
	* html .r{float:left;}
	
	.q{background:#d8d8d8;}
	* html .q{width:100%;}
	head+body .q{margin:0 20em 0 20em; }
	
	.fo{background:#fbfbfb;clear:both;}
	
	.wra h1,.wra p,.fo p{padding:5px;}
	
	.ca{background:#ccccff;}
	.cb{background:#ffccff;}
	</style>
</head>
<body>

<div class="wra w">

<div class="he">
<h1>header</h1>
<p>Basic 3 Column Bare</p>
</div>

<div class="na"><p>nav</p></div>

<div class="l ca"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="l cb"><p>left 2<br /><br /><br /><br /><br />end</p></div>

<div class="ll ca"><p>right 2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="ll cb"><p>right 1<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>

<div class="r">
<div class="q">
<p>Content in this box must always be heigher then that of the left or right colunm</p>
<p><a href="../../../layouts.htm">back</a></p>  
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
<p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
</div>
</div>

<div class="fo"><p>footer</p></div>
</div>

</body>
</html>

**mhulse** · Jun 19, 2006, 04:13

Hi all4nerds.

Thanks for the quick response! I really appreciate your time and hlep and example code.

It looks like a great place to start. Hehe, I was just heading off to bed... hmmm, maybe I can stay up for another couple hours and examine your example code... Argh! I hate how sleep always seems to get in the way!

Lol, thanks again... I am sure you will hear back from me with questions very soon.

Cheers,
Micky

**mhulse** · Jun 19, 2006, 04:20

@all4nerds: Wow, just tested it out! Very cool! Thanks for the great example. Definitely going to stay up for a bit longer tonight.

@Egor: Doh, was posting while you posted... looks like another great example! Testing it out now. Thanks for your time and example code, I really appreciate it.

Thanks to both of you for sharing your examples.

Cheers,
Micky

**mhulse** · Jun 19, 2006, 04:26

Oh, is it just me, or did the post by Egor go away?

**Egor** · Jun 19, 2006, 04:35

Hey Micky,

I saw all4nerds got in earlier so removed it.

It's just a very very simple one:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>No Frills</title>
    <style type="text/css" media="screen, projection">
      * {
        margin: 0;
        padding: 0;
        font-size: 100%;
      }

      body {
        font: 68.75%/1.65 Tahoma, Arial, sans-serif;
      }

      hr {
        display: none;
      }

      #page {
        width: 950px;
        border: 1px solid #EEE;
        margin: 0 auto;
      }

        #header {
          height: 200px;
        }

        .col {
          float: left;
        }

        * html .col {
          height: 1%;
        }

          .col * {
            margin-left: 15px;
            margin-right: 15px;
          }

            .col * * {
              margin: 0;
            }

        .a {
          width: 100px;
        }
  
        .b {
          width: 300px;
        }
  
        .c {
          width: 200px;
        }
  
        .d {
          width: 150px;
        }
  
        .e {
          width: 150px;
        }
  
        #footer {
          clear: both;
          height: 50px;
        }
    </style>
  </head>
  <body>

    <div id="page">

      <div id="header">
        <h2>Header</h2>
      </div>

      <div class="col a">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam mauris erat, tempor a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
        <p>Praesent lectus massa, mattis non, consectetuer congue, vestibulum sed, tellus. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum tempus lacinia quam. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
        <p>Nunc ornare auctor augue. Nullam fringilla egestas quam. Nam egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam volutpat. Aenean dui pede, feugiat ac, sollicitudin et, egestas a, lacus. Nullam sit amet orci sit amet pede cursus tincidunt. Integer quam. Curabitur erat. Pellentesque quam diam, posuere in, tempor vel, cursus in, libero. Phasellus at mi. Morbi eleifend. In a nunc. In hac habitasse platea dictumst.</p>
      </div>

    <hr>

      <div class="col b">
        <p>Nunc ornare auctor augue. Nullam fringilla egestas quam. Nam egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam volutpat. Aenean dui pede, feugiat ac, sollicitudin et, egestas a, lacus. Nullam sit amet orci sit amet pede cursus tincidunt. Integer quam. Curabitur erat. Pellentesque quam diam, posuere in, tempor vel, cursus in, libero. Phasellus at mi. Morbi eleifend. In a nunc. In hac habitasse platea dictumst.</p>
      </div>

    <hr>

      <div class="col c">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam mauris erat, tempor a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
        <p>Praesent lectus massa, mattis non, consectetuer congue, vestibulum sed, tellus. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum tempus lacinia quam. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
      </div>

    <hr>

      <div class="col d">
        <p>Praesent lectus massa, mattis non, consectetuer congue, vestibulum sed, tellus. Nam elementum tempus velit. Etiam eleifend dignissim nibh. Aliquam erat volutpat. Sed massa elit, interdum ac, dapibus sit amet, ornare eget, purus. Vestibulum convallis. Etiam urna dolor, hendrerit ac, nonummy vestibulum, fermentum at, erat. Sed vitae augue vitae purus fermentum volutpat. Etiam non nisi vitae odio eleifend pretium. Vestibulum tempus lacinia quam. Duis molestie mi et nibh. Vestibulum tellus odio, accumsan et, condimentum eget, auctor id, augue. Curabitur vel justo ut elit tempus feugiat. Morbi aliquam, ligula ac lobortis imperdiet, orci nunc vehicula justo, at posuere nisl metus vel lacus. Morbi ac quam. Ut convallis, leo vitae consequat fringilla, nisl enim bibendum orci, eu sollicitudin lorem orci a neque. Curabitur ultricies ipsum eu pede. Donec diam nunc, vestibulum nec, luctus quis, viverra quis, justo. Ut aliquam nulla hendrerit diam. Cras id diam. Aliquam erat volutpat. Quisque ultrices, lacus eu scelerisque semper, dui libero varius enim, ac tempus leo dolor eu elit. Duis nisl. Sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ante. Aliquam erat volutpat. Sed ipsum lorem, elementum nec, blandit ac, mollis sed, erat.</p>
      </div>

    <hr>

      <div class="col e">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sagittis est tempor odio. Suspendisse eu dolor. Quisque id sapien at ante iaculis vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam dignissim. Vivamus condimentum magna eget lectus. Nullam mauris erat, tempor a, volutpat eu, vestibulum nec, leo. Nullam accumsan vestibulum ante. Ut et lectus. Duis nunc urna, pharetra ac, blandit laoreet, fermentum vel, libero. Aliquam erat volutpat.</p>
      </div>

    <hr>

      <div id="footer">
        <p>All contents copyright &copy;2005-2006 <a href="">Company Name</a>. All rights reserved.</p>
      </div>

    </div>

  </body>
</html>

**mhulse** · Jun 19, 2006, 14:00

Ah, great! Thanks for sharing Egor.

I am actually glad to see an example that uses pixels for layout... good for comparison to the example all4nerds posted.

Quick question on your css though...

Code:

.col * { margin-left: 15px; margin-right: 15px; }
.col * * { margin: 0; }

Let me see if I am interpretting that correctly:

.col * is for all modern browsers (all that can understand the * selector)

.col * * is for IE versions 6.5 and below?

Would IE see the above two like this:

Code:

.col { margin-left: 15px; margin-right: 15px; }
.col * { margin: 0; }

Basing my avove assumption off of this article:

http://www.info.com.ph/~etan/w3panth...arhtmlbug.html

Also, how did you avoid using a ton of box-model hacks and filters (* html { height 1%; })?

I am amazed at how basic both of the examples CSS is... again, great learning resources for a noob. I really appreciate both of your posts.

Cheers,
M

The SitePoint Forums have moved.

User Tag List

Thread: 4-col and/or 5-col simple layouts: Examples to learn from?

Thread Tools

Display

4-col and/or 5-col simple layouts: Examples to learn from?

Bookmarks

Bookmarks

Posting Permissions