When it comes to understanding the world of standards based design, you have to think medieval. Creating a web site in CSS is like building a manor. You are a lord, setting aside land for specific purposes, hoping the user rotates their content appropriately. Most of you will build villages attracting only a few peasants to comment on various decrees, some of you will build castles and a very small number will build what I can only describe as cathedrals—structures that warrant pilgrimages from thousands across the globe.

You've heard the buzz about the seperation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place! Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways.

In November 2005 I presented on pro.html.it
a three-part article on creating CSS layouts using techniques like negative
margins, any
order columns 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 single zip file).
Further details can be found below the gallery.

<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/87/"
dc:title="CSS Gradient Shadow"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/"
dc:subject="0"
dc:description="<p><b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css"> .shadow{ border:1px solid silver; font:10pt arial; position:relative; display:inline; background:white; z-index:100 } .shadow_inner{ overflow:hidden; position:absolute; top: -1000px; filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/ opacity:0.1; /*firefox 1.5 opacity*/ -moz-opacity:0.1; /*mozilla opacity*/ -khtml-opacity:0.1;…"
dc:creator="ddadmin"
dc:date="2007-01-15 01:13:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/thick-padding-tabs/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/74/"
dc:title="CSS Thick Tabs"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/thick-padding-tabs/"
dc:subject="0"
dc:description="<p class="iepara"><b class="codetitle">The two images used (resized horizontally):</b> <img src="http://www.dynamicdrive.com/cssexamples/media/pinkbg.gif" width="50px" height="59px" title="Dimensions- 50px by 59px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/pinkbgover.gif" width="50px" height="59px" title="Dimensions- 50px by 59px" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css">…"
dc:creator="ddadmin"
dc:date="2006-11-12 05:24:01 PM GMT" />
</rdf:RDF>
-->





<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/47/"
dc:title="SuckerTree Vertical Menu (v1.1)"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/"
dc:subject="0"
dc:description="<p><b class="codetitle">The single image:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/arrow-list.gif" width="12" height="12" title="Dimensions- 12px by 12px" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css"> .suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 160px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } .suckerdiv ul li{…"
dc:creator="ddadmin"
dc:date="2006-11-09 03:11:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/overlapping-horizontal-tabs/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/52/"
dc:title="Overlapping horizontal tabs"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/overlapping-horizontal-tabs/"
dc:subject="0"
dc:description="<b class="codetitle">The two images used:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/righttabselected.gif" width="492" height="63" style="border-width: 0" title="True dimensions- 492px by 63px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/righttabdefault.gif" width="492" height="63" style="border-width: 0" title="True dimensions- 492px by 63px" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10"…"
dc:creator="ddadmin"
dc:date="2006-10-04 07:05:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/animated-link-underlines/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/51/"
dc:title="Animated link underlines"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/animated-link-underlines/"
dc:subject="0"
dc:description="<p id="iepara"><b class="codetitle">The single image used:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/animated_underline.gif" width="20" height="5" title="Dimensions- 20px by 5px" border="0" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css"> a:link { color: #C37108; white-space: nowrap; text-decoration: none; } a:visited { text-decoration: none; color: #C37108;…"
dc:creator="ddadmin"
dc:date="2006-09-18 04:56:00 AM GMT" />
</rdf:RDF>
-->





<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/50/"
dc:title="SuckerTree Horizontal Menu"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/"
dc:subject="0"
dc:description="<p id="iepara"><b class="codetitle">The two bullet images used:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/arrow-down.gif" width="16" height="12" title="Dimensions- 16px by 12px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/arrow-right.gif" width="12" height="12" title="Dimensions- 12px by 12px" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css">…"
dc:creator="ddadmin"
dc:date="2006-09-15 12:09:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/49/"
dc:title="Sleek Pointer Menu 2"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/"
dc:subject="0"
dc:description="<b class="codetitle">The three images used (last image resized for easier download):</b> <img src="http://www.dynamicdrive.com/cssexamples/media/leftround2.gif" width="8" height="45" style="border-width: 0" title="True dimensions- 8px by 45px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/rightround2.gif" width="8" height="45" style="border-width: 0" title="True dimensions- 8px by 45px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/pointer.gif"…"
dc:creator="ddadmin"
dc:date="2006-09-02 04:16:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/half-moon-tab-menu/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/48/"
dc:title="Half moon tab menu"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/half-moon-tab-menu/"
dc:subject="0"
dc:description="<p><b class="codetitle">The single image:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/tabright.gif" width="281" height="36" title="Dimensions- 281px by 36px" style="border-width: 0" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css"> .halfmoon{ margin-bottom: 1em; } .halfmoon ul{ padding: 3px 9px 2px 5px; margin-left: 0; margin-top: 1px; margin-bottom: 0; font:…"
dc:creator="ddadmin"
dc:date="2006-08-14 07:08:01 PM GMT" />
</rdf:RDF>
-->





<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/css-pagination-links/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/46/"
dc:title="CSS Pagination Links"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/css-pagination-links/"
dc:subject="0"
dc:description="<p><b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style type="text/css"> .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; /*Set to "right" to right align pagination interface*/ font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color:…"
dc:creator="ddadmin"
dc:date="2006-07-27 02:36:01 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/44/"
dc:title="DD Color Tabs II"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/"
dc:subject="0"
dc:description="<p><b class="codetitle">The two images (resized for easier download):</b> <img src="http://www.dynamicdrive.com/cssexamples/media/color_tabs_left2.gif" width="30" height="50" title="True dimensions- 9px by 2000px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/color_tabs_right2.gif" width="30" height="50" title="True dimensions- 400px by 200px" /> <b class="codetitle">The CSS:</b> <form> <textarea class="codecontainer" rows="10" cols="70"> <style…"
dc:creator="ddadmin"
dc:date="2006-07-13 12:43:00 AM GMT" />
</rdf:RDF>
-->




<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="http://www.dynamicdrive.com/style/csslibrary/item/plastic-tabs-menu/"
trackback:ping="http://www.dynamicdrive.com/style/trackback/43/"
dc:title="Plastic Tabs menu"
dc:identifier="http://www.dynamicdrive.com/style/csslibrary/item/plastic-tabs-menu/"
dc:subject="0"
dc:description="<b class="codetitle">The three images used:</b> <img src="http://www.dynamicdrive.com/cssexamples/media/greenleft.gif" width="9" height="94" title="True dimensions- 9px by 94px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/greenbg.gif" width="6" height="94" title="True dimensions- 6px by 94px" /> <img src="http://www.dynamicdrive.com/cssexamples/media/greenright.gif" width="8" height="94" title="True dimensions- 8px by 94px" /> <b class="codetitle">The…"
dc:creator="ddadmin"
dc:date="2006-06-27 01:36:00 AM GMT" />
</rdf:RDF>
-->