DIV

Have a look here: http://blog.html.it/layoutgala/

We basically take the following page layout using only <div> tags:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="wrapper">
        <div id="content">Content</div>
    </div>
    <div id="navigation">Navigation</div>
    <div id="extra">Extra</div>
    <div id="footer">Footer</div>
</div>
</body>
</html>

Using only CSS instructions we can make a total of 40 different layouts.

For example, the following CSS instructions will result in a 3 percentage columns layout:
(Navigation – Content – Extra)

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}

Let’s try it:

  1. Go here: http://codepen.io/pen
  2. Paste the HTML code into the HTML section.
  3. Paste the CSS code into the CSS section.
  4. Resize your internet browser window to see how the page layout adapts and the text wraps.

Let’s add some “Lorum Ipsum” placeholder sample text paragraphs:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat iaculis nunc, et auctor magna porttitor blandit. Maecenas imperdiet nulla nec sem euismod ultricies non sit amet lorem. Mauris sem magna, rutrum in arcu non, dignissim cursus ante. Aliquam tempor sem ac leo ullamcorper maximus. Aliquam aliquam lobortis erat quis sagittis. Suspendisse auctor viverra sem ut vestibulum. Ut tempor porta orci, id condimentum lacus pretium et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum malesuada vehicula. Integer placerat mi et mi eleifend faucibus. Quisque cursus pharetra magna, ac ornare nisi. Pellentesque gravida tellus nec metus aliquam tincidunt. Cras et fermentum augue, ac consequat sapien. Nulla facilisi. Vivamus tincidunt lorem magna, id tempor ligula pretium vitae.</p>
<p>Quisque vitae interdum nulla. Aliquam vulputate maximus nunc, eget ullamcorper libero malesuada quis. Donec blandit sit amet nibh pellentesque sagittis. Vestibulum a ante lacinia, ultrices mauris ut, pretium ipsum. Suspendisse id viverra urna, vitae aliquam dui. Duis vehicula faucibus sem sed viverra. Vestibulum sit amet diam pellentesque, viverra justo et, fringilla lorem. In euismod odio a nunc dignissim mattis. Donec tempor rhoncus libero mollis blandit.</p>
<p>Curabitur at commodo ex, non scelerisque enim. Phasellus nibh nisi, tempus ut pharetra ac, pharetra vitae nunc. Donec ipsum risus, rutrum quis suscipit vel, suscipit ut dolor. Nunc a purus eu est blandit finibus vel pellentesque neque. Maecenas metus nibh, facilisis vitae tortor sed, ullamcorper blandit dolor. Morbi fringilla in purus nec blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis nec consectetur velit, non pharetra magna. Praesent lacus ante, molestie tempus dignissim nec, fringilla eget magna.</p>

Simply paste the following HTML code into the HTML section:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="wrapper">
        <div id="content">Content
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat iaculis nunc, et auctor magna porttitor blandit. Maecenas imperdiet nulla nec sem euismod ultricies non sit amet lorem. Mauris sem magna, rutrum in arcu non, dignissim cursus ante. Aliquam tempor sem ac leo ullamcorper maximus. Aliquam aliquam lobortis erat quis sagittis. Suspendisse auctor viverra sem ut vestibulum. Ut tempor porta orci, id condimentum lacus pretium et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum malesuada vehicula. Integer placerat mi et mi eleifend faucibus. Quisque cursus pharetra magna, ac ornare nisi. Pellentesque gravida tellus nec metus aliquam tincidunt. Cras et fermentum augue, ac consequat sapien. Nulla facilisi. Vivamus tincidunt lorem magna, id tempor ligula pretium vitae.</p>
<p>Quisque vitae interdum nulla. Aliquam vulputate maximus nunc, eget ullamcorper libero malesuada quis. Donec blandit sit amet nibh pellentesque sagittis. Vestibulum a ante lacinia, ultrices mauris ut, pretium ipsum. Suspendisse id viverra urna, vitae aliquam dui. Duis vehicula faucibus sem sed viverra. Vestibulum sit amet diam pellentesque, viverra justo et, fringilla lorem. In euismod odio a nunc dignissim mattis. Donec tempor rhoncus libero mollis blandit.</p>
<p>Curabitur at commodo ex, non scelerisque enim. Phasellus nibh nisi, tempus ut pharetra ac, pharetra vitae nunc. Donec ipsum risus, rutrum quis suscipit vel, suscipit ut dolor. Nunc a purus eu est blandit finibus vel pellentesque neque. Maecenas metus nibh, facilisis vitae tortor sed, ullamcorper blandit dolor. Morbi fringilla in purus nec blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis nec consectetur velit, non pharetra magna. Praesent lacus ante, molestie tempus dignissim nec, fringilla eget magna.</p>
</div>
    </div>
    <div id="navigation">Navigation
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat iaculis nunc, et auctor magna porttitor blandit. Maecenas imperdiet nulla nec sem euismod ultricies non sit amet lorem. Mauris sem magna, rutrum in arcu non, dignissim cursus ante. Aliquam tempor sem ac leo ullamcorper maximus. Aliquam aliquam lobortis erat quis sagittis. Suspendisse auctor viverra sem ut vestibulum. Ut tempor porta orci, id condimentum lacus pretium et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum malesuada vehicula. Integer placerat mi et mi eleifend faucibus. Quisque cursus pharetra magna, ac ornare nisi. Pellentesque gravida tellus nec metus aliquam tincidunt. Cras et fermentum augue, ac consequat sapien. Nulla facilisi. Vivamus tincidunt lorem magna, id tempor ligula pretium vitae.</p>
<p>Quisque vitae interdum nulla. Aliquam vulputate maximus nunc, eget ullamcorper libero malesuada quis. Donec blandit sit amet nibh pellentesque sagittis. Vestibulum a ante lacinia, ultrices mauris ut, pretium ipsum. Suspendisse id viverra urna, vitae aliquam dui. Duis vehicula faucibus sem sed viverra. Vestibulum sit amet diam pellentesque, viverra justo et, fringilla lorem. In euismod odio a nunc dignissim mattis. Donec tempor rhoncus libero mollis blandit.</p>
<p>Curabitur at commodo ex, non scelerisque enim. Phasellus nibh nisi, tempus ut pharetra ac, pharetra vitae nunc. Donec ipsum risus, rutrum quis suscipit vel, suscipit ut dolor. Nunc a purus eu est blandit finibus vel pellentesque neque. Maecenas metus nibh, facilisis vitae tortor sed, ullamcorper blandit dolor. Morbi fringilla in purus nec blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis nec consectetur velit, non pharetra magna. Praesent lacus ante, molestie tempus dignissim nec, fringilla eget magna.</p>
</div>
    <div id="extra">Extra
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat iaculis nunc, et auctor magna porttitor blandit. Maecenas imperdiet nulla nec sem euismod ultricies non sit amet lorem. Mauris sem magna, rutrum in arcu non, dignissim cursus ante. Aliquam tempor sem ac leo ullamcorper maximus. Aliquam aliquam lobortis erat quis sagittis. Suspendisse auctor viverra sem ut vestibulum. Ut tempor porta orci, id condimentum lacus pretium et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum malesuada vehicula. Integer placerat mi et mi eleifend faucibus. Quisque cursus pharetra magna, ac ornare nisi. Pellentesque gravida tellus nec metus aliquam tincidunt. Cras et fermentum augue, ac consequat sapien. Nulla facilisi. Vivamus tincidunt lorem magna, id tempor ligula pretium vitae.</p>
<p>Quisque vitae interdum nulla. Aliquam vulputate maximus nunc, eget ullamcorper libero malesuada quis. Donec blandit sit amet nibh pellentesque sagittis. Vestibulum a ante lacinia, ultrices mauris ut, pretium ipsum. Suspendisse id viverra urna, vitae aliquam dui. Duis vehicula faucibus sem sed viverra. Vestibulum sit amet diam pellentesque, viverra justo et, fringilla lorem. In euismod odio a nunc dignissim mattis. Donec tempor rhoncus libero mollis blandit.</p>
<p>Curabitur at commodo ex, non scelerisque enim. Phasellus nibh nisi, tempus ut pharetra ac, pharetra vitae nunc. Donec ipsum risus, rutrum quis suscipit vel, suscipit ut dolor. Nunc a purus eu est blandit finibus vel pellentesque neque. Maecenas metus nibh, facilisis vitae tortor sed, ullamcorper blandit dolor. Morbi fringilla in purus nec blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis nec consectetur velit, non pharetra magna. Praesent lacus ante, molestie tempus dignissim nec, fringilla eget magna.</p>
</div>
    <div id="footer">Footer
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat iaculis nunc, et auctor magna porttitor blandit. Maecenas imperdiet nulla nec sem euismod ultricies non sit amet lorem. Mauris sem magna, rutrum in arcu non, dignissim cursus ante. Aliquam tempor sem ac leo ullamcorper maximus. Aliquam aliquam lobortis erat quis sagittis. Suspendisse auctor viverra sem ut vestibulum. Ut tempor porta orci, id condimentum lacus pretium et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum malesuada vehicula. Integer placerat mi et mi eleifend faucibus. Quisque cursus pharetra magna, ac ornare nisi. Pellentesque gravida tellus nec metus aliquam tincidunt. Cras et fermentum augue, ac consequat sapien. Nulla facilisi. Vivamus tincidunt lorem magna, id tempor ligula pretium vitae.</p>
<p>Quisque vitae interdum nulla. Aliquam vulputate maximus nunc, eget ullamcorper libero malesuada quis. Donec blandit sit amet nibh pellentesque sagittis. Vestibulum a ante lacinia, ultrices mauris ut, pretium ipsum. Suspendisse id viverra urna, vitae aliquam dui. Duis vehicula faucibus sem sed viverra. Vestibulum sit amet diam pellentesque, viverra justo et, fringilla lorem. In euismod odio a nunc dignissim mattis. Donec tempor rhoncus libero mollis blandit.</p>
<p>Curabitur at commodo ex, non scelerisque enim. Phasellus nibh nisi, tempus ut pharetra ac, pharetra vitae nunc. Donec ipsum risus, rutrum quis suscipit vel, suscipit ut dolor. Nunc a purus eu est blandit finibus vel pellentesque neque. Maecenas metus nibh, facilisis vitae tortor sed, ullamcorper blandit dolor. Morbi fringilla in purus nec blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis nec consectetur velit, non pharetra magna. Praesent lacus ante, molestie tempus dignissim nec, fringilla eget magna.</p>
</div>
</div>
</body>
</html>

Now let’s use different CSS style – in this case 3 fixed width colums:

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}

Paste this CSS code into the CSS section and resize the internet browser window.  Note how the columns no longer change size.

You can explore all 40 different page styles and download them as a single zip file:

Layoutgala.zip [45 kBytes]

CSS

There are additional CSS styling arguments for more advanced page layouts: position:absolute/relative, display:block, etc.

CSS v3 has introduced styling arguments resulting in web pages where images automatically resize (max-width) or content can be 2D transformed (moved), rotated and scaled.  This has led to the popular responsive (grid) templates and parallax templates.

The more advanced templates struggle with Internet browser compatibility and often rely on javascript (jQuery) for rendering of page content.

Tools

Rather than using Adobe Dreamweaver, we prefer to use Firefox + Firebug add-on to explore web pages and make CSS changes on-the-fly.  It allows us to easily explore HTML/CSS and we can experiment by making changes directly in the page source without having to reload the web page.  Simply press F12 to activate Firebug and use the Page Inspector (mouse pointer button) to explore a web page.

DIV was last modified: May 26th, 2015 by tabcom