Copy the XHTML into your document. Be sure to not copy the advertisement copy that may appear within the 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="main">
<p>This is the main column that has a fixed width of 600px (585 pixels wide and 15px
of padding on the left and right). </p>
<p>To test out this design, open it in a non-maximized window. Then try resizing
your window wider and narrower. As you widen it, the three columns on the right
side will either display one above the other or side by side - depending upon how
much room you have for them. </p>
<h3>Liquid and Fixed Widths Combined </h3>
<p>This layout uses a fixed width for the main column (this one) and a liquid width
for the secondary column. That means that the site will stretch for wider browsers,
but won't get too narrow to read for any one column. </p>
<p>Another feature of this layout is that it has a <a href="http://webdesign.about.com/od/css/a/aa020899.htm">max-width</a> set
so that it won't get any wider than 1200px. This means that on widescreen monitors
it won't get so wide that it is unreadable. However, if you aren't worried about
that, or you feel that the max-width makes the page less accessible, removing it
doesn't affect the rest of the design. </p>
<h3>The Faux Column </h3>
<p>Another interesting feature of this page is the faux column. This one uses a very
simple white background that is only 600px wide and 1px high so it's very small
- 64KB. I tiled it using CSS only on the y-axis, so it just stacks one on top of
the other, and doesn't over lap on the brick background color I use for the rest
of the page. </p>
<p class="small">Thanks to <a href="http://muffinresearch.co.uk/">Muffin Research Labs</a> for
the initial ideas behind this layout. </p>
</div>
<div id="nowrap"><div id="side">
<p>This is the top of the side column - it will have a maxwidth of 600px and a minwidth of 200px and depending upon how wide the browser window is, it can stretch to fit the three sub-columns.</p>
<div id="side1"><p>The first column.</p>
<ul>
<li><a href="http://webdesign.about.com/od/websitetemplates/a/bl_layouts.htm">More CSS Layouts</a> </li>
<li><a href="http://webdesign.about.com/od/websitetemplates/p/bl2colfaux.htm">The Faux Column Layout</a> </li>
<li><a href="http://webdesign.about.com/od/css/a/aa020899.htm">Using Style Classes and IDs</a> </li>
</ul>
</div>
<div id="side2"><p>The second column.</p>
<ul>
<li>Information About the Template</li>
<li>The CSS</li>
<li>The XHTML </li>
</ul>
</div>
<div id="side3"><p>The third column.</p>
<p>Consectetur adipisicing elit, duis aute irure dolor ut aliquip ex ea commodo
consequat. Velit esse cillum dolore cupidatat non proident, eu fugiat nulla
pariatur. Excepteur sint occaecat duis aute irure dolor consectetur adipisicing
elit.</p>
<p>Qui officia deserunt quis nostrud exercitation lorem ipsum dolor sit amet.
Mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit,
ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt.</p>
</div>
</div></div>
</div>
</body>
</html>
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
Return to Two Column Stretches to Fit Layout
More XHTML CSS Layout Templates
