<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Gala: 40 CSS base layouts for same HTML markup</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
</head>
<body>
<div class="container">
<h1><a href="http://blog.html.it/layoutgala/"><img src="images/header.png" alt="Layout Gala"></a></h1>
<div id="intro">
<address>by <a href="http://www.html.it">Alessandro Fulciniti</a></address>
    <p>In November 2005 I presented on <a href="http://pro.html.it">pro.html.it</a> 
      a three-part article on creating CSS layouts using techniques like <a href="http://www.alistapart.com/articles/negativemargins/">negative 
      margins</a>, <a href="http://www.positioniseverything.net/articles/onetruelayout/anyorder">any 
      order columns</a> and in some case opposite floats. The main goal of the 
      article was getting the maximum number of layouts based on the same markup, 
      each with valid CSS and HTML, without hacks nor workaround and a good cross-browser 
      compatibility. The result is a set of 40 layouts that we've thought worth 
      sharing: on each of them you'll find also a download link (if you want, 
      you can download the entire collection, 40 HTML pages in a <a href="http://blog.html.it/layoutgala/allLayouts.zip">single zip file</a>). 
      Further details can be found <a href="#details">below the gallery</a>.</p>

</div>
<ul id="gallery">
<li id="lg01"><a href="01.html"><div class="container"><h1>#1</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg02"><a href="02.html"><div class="container"><h1>#2</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg03"><a href="03.html"><div class="container"><h1>#3</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg04"><a href="04.html"><div class="container"><h1>#4</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg05"><a href="05.html"><div class="container"><h1>#5</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg06"><a href="06.html"><div class="container"><h1>#6</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three percentage columns</a></li>
<li id="lg07"><a href="07.html"><div class="container"><h1>#7</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg08"><a href="08.html"><div class="container"><h1>#8</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg09"><a href="09.html"><div class="container"><h1>#9</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg10"><a href="10.html"><div class="container"><h1>#10</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg11"><a href="11.html"><div class="container"><h1>#11</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg12"><a href="12.html"><div class="container"><h1>#12</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Three fixed columns</a></li>
<li id="lg13"><a href="13.html"><div class="container"><h1>#13</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg14"><a href="14.html"><div class="container"><h1>#14</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg15"><a href="15.html"><div class="container"><h1>#15</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg16"><a href="16.html"><div class="container"><h1>#16</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg17"><a href="17.html"><div class="container"><h1>#17</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg18"><a href="18.html"><div class="container"><h1>#18</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, secondary columns fixed-width</a></li>
<li id="lg19"><a href="19.html"><div class="container"><h1>#19</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, three columns, hybrid widths</a></li>
<li id="lg20"><a href="20.html"><div class="container"><h1>#20</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, three columns, hybrid widths</a></li>
<li id="lg21"><a href="21.html"><div class="container"><h1>#21</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, three columns, hybrid widths</a></li>
<li id="lg22"><a href="22.html"><div class="container"><h1>#22</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Liquid, three columns, hybrid widths</a></li>
<li id="lg23"><a href="23.html"><div class="container"><h1>#23</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two columns liquid, side fixed</a></li>
<li id="lg24"><a href="24.html"><div class="container"><h1>#24</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two columns liquid, side fixed</a></li>
<li id="lg25"><a href="25.html"><div class="container"><h1>#25</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two percentage columns</a></li>
<li id="lg26"><a href="26.html"><div class="container"><h1>#26</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two percentage columns</a></li>
<li id="lg27"><a href="27.html"><div class="container"><h1>#27</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>One column liquid and two halves</a></li>
<li id="lg28"><a href="28.html"><div class="container"><h1>#28</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>One column liquid and two halves</a></li>
<li id="lg29"><a href="29.html"><div class="container"><h1>#29</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two percentage columns and one larger</a></li>
<li id="lg30"><a href="30.html"><div class="container"><h1>#30</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two percentage columns and one larger</a></li>
<li id="lg31"><a href="31.html"><div class="container"><h1>#31</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two columns liquid, fixed side and large one</a></li>
<li id="lg32"><a href="32.html"><div class="container"><h1>#32</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two columns liquid, fixed side and large one</a></li>
<li id="lg33"><a href="33.html"><div class="container"><h1>#33</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg34"><a href="34.html"><div class="container"><h1>#34</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg35"><a href="35.html"><div class="container"><h1>#35</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg36"><a href="36.html"><div class="container"><h1>#36</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg37"><a href="37.html"><div class="container"><h1>#37</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg38"><a href="38.html"><div class="container"><h1>#38</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>Two colums fixed</a></li>
<li id="lg39"><a href="39.html"><div class="container"><h1>#39</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>One column fixed and two halves</a></li>
<li id="lg40"><a href="40.html"><div class="container"><h1>#40</h1><div class="wrapper"><div class="content">&nbsp;<br/>&nbsp;</div></div><div class="navigation">&nbsp;</div><div class="extra">&nbsp;</div><div class="footer">&nbsp;</div></div>One column fixed and two halves</a></li>
</ul>
</div>
<div id="details">
<h2>Further details</h2>
<p>All layouts use valid markup and CSS, and have been tested successfully on
Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2.
Each of the columns could be the longest, and for testing columns length I've used the
script <a href="http://web-graphics.com/mtarchive/001667.php">filler text on demand</a>.</p>
<p>Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic
markup, common to every layout, is the following:</p>
<p class="codice">
<code>
&lt;div&nbsp;id=&quot;container&quot;&gt;<br>
&nbsp;&nbsp;&lt;div&nbsp;id=&quot;header&quot;&gt;Header&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;div&nbsp;id=&quot;wrapper&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;content&quot;&gt;Content&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;div&nbsp;id=&quot;navigation&quot;&gt;Navigation&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;div&nbsp;id=&quot;extra&quot;&gt;Extra&nbsp;stuff&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;div&nbsp;id=&quot;footer&quot;&gt;Footer&lt;/div&gt;<br>
&lt;/div&gt;&nbsp;
</code>
</p>
<p>It's almost minimal, apart from an extra wrapper around the content. Some might
argue that the extra div it's unsemantical: all I can say is that in my opinion
an extra wrapper in the markup is certainly better than CSS hacking, and to
be able to meet the objectives I fixed for the article I needed at least a solid starting
point.</p><p>Talking about CSS: each of the layouts uses <code>float</code> and in most
of the cases negative margins. Once you've understand how they work, they are really
simple and powerful. There are two main things to know: first, a negative margin according
to the side of float has the effect of shifting even more the floated elements towards
the side of float; the second one is that a negative margin on the opposite side of float
does not affect the floated element position, but has the only effect to yeld space for
eventual flanking element on the side of the negative margin.</p>
<p>The CSS of the examples, which is embedded in both online and download versions,
has been kept to the minimum in order to focus on the most important thing, as is the layout.
In fact, the CSS has been divided, with an empty line, between two logical parts:
the first is for typography and colors, while the second and most important is for the layout itself.
No graphics was used in the examples, but if you'll feel the need, you may want to apply
techniques such as <a href="http://www.alistapart.com/articles/fauxcolumns/">Faux Columns</a>
and <a href="http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/">Sliding Faux Columns</a>. That's all for now: enjoy!</p>
</div>
</body>
</html>
