The following html and css code is an example of a 3 column liquid layout used on the front page of http://slashdot.org. What's interesting is that the left and right column do not change their widths, it's only the article content which changes.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aenean: ullamcorper elementum, dui quam porttitor neque</title>
<link rel="stylesheet" type="text/css" media="screen" href="core-tidied.css" />
</head>
<body>
<div id="frame">
<div id="topnav">
<div id="logo">
<h1>
<a href="//aenean.org">Aenean</a>
</h1>
</div>
</div>
<div id="slogan">
<h2>
ullamcorper elementum, dui quam porttitor neque
</h2>
</div>
<div id="wrapper">
<div id="links">
<div class="block" id="links-sections">
<div class="title" id="links-sections-title">
<h4>
hendrerit
</h4>
</div>
<div class="content" id="links-sections-content">
<ul>
<li>suscipit</li>
</ul>
</div>
</div>
</div>
<div id="contents">
<div id="slashboxes">
<div class="block">
<div class="title" id="index_qlinks-title">
<h4>
Vestibulum
</h4>
</div>
<div class="content" id="index_qlinks-content">
<p>egestas quam </p>
</div>
</div>
</div>
<div id="articles">
<div class="article" id="art1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt porttitor felis. Sed a tellus in lacus adipiscing tincidunt. Ut sollicitudin auctor dolor. Maecenas orci. Fusce porttitor odio eget erat. Aliquam erat volutpat. Fusce mollis, orci eget ullamcorper elementum, dui quam porttitor neque, euismod pulvinar risus turpis nec neque. Maecenas dolor risus, vestibulum in, congue a, pulvinar id, leo. Vestibulum porttitor hendrerit mauris. Morbi fringilla lectus quis orci. Vivamus laoreet massa scelerisque felis.
</p>
<p>
Aenean nunc neque, euismod porta, tempor ut, eleifend at, massa. Nam tempor urna at ligula. Etiam auctor dui tempus odio egestas sagittis. Donec metus pede, tempor nec, tincidunt sit amet, consectetuer eget, massa. Nam dolor arcu, ornare et, imperdiet vel, euismod ut, nibh. Quisque ut erat. Maecenas ante urna, suscipit eget, dictum non, porttitor at, magna. Duis accumsan. Suspendisse luctus vehicula pede. Mauris a nisl. Cras leo.
</p>
</div>
</div>
</div>
</div>
<div id="footer">
Ut sollicitudin auctor dolor. Maecenas orci.
</div>
</div>
</body>
</html>
/* file: core-tidied.css */
body {
min-width: 680px;
color:
background:
}
background-color:
}
background:
position: relative;
height: 55px;
margin: 5px 1.25em 0 1.25em;
}
width: 415px;
height: 100%;
}
#topnav #logo h1 {
display: block;
height: 100%;
width: 100%;
}
display: block;
width: 100%;
height: 100%;
outline: none;
text-indent: -5000px;
text-decoration: none;
background: url(//images.slashdot.org/logo.png) no-repeat left top;
}
/* Wrapper */
overflow: hidden;
background-color:
}
/* User section menu */
/* Contents */
width: auto;
margin-left: 10.5em;
}
/* General Body */
/* Blocks */
div.block div.title { background:
div.block div.title h4 {
color:
}
/* Links (left sidebar) */
div
float: left;
width: 9.25em;
background:
}
div
/* Slashboxes (right sidebar) */
div
float: right;
width: 17.25em;
}
/* Footer */
div
background:
clear: both;
}
The secret to positioning the columns, is to use left and right margins to push the element (column being adjusted), away from it's siblings. In the above example the contents (outer box) is pushed away from the left (#contents { margin-left: 10.5em;}), and the articles (inner box) within the contents is pushed from the right (#wrapper #articles { margin-right: 18.5em; }).
