What is a fluid width page?
A fluid width page – or liquid – layout is one that shrinks and grows between two values of widths. For instance, a page might have a maximum width of 1280 pixels and a minimum width of 800 pixels.
Some clients or freelance website designers may want their page to grow or shrink with the browser window. Some think this is an outdated technique, but it is still used in several modern and large-scale designs. If an excessively long line-length is a problem, enclose blocks of text in a DIV element and specify a fixed width. If you find this useful or use a sight with a liquid or dynamic width layout, leave a comment with a link to your site at the bottom of this post.
Fluid CSS Layout Demo
– See the code in action.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Perfect Fluid CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<div id="inside">
<div id="header">Header</div>
<div id="left">Sidebar</div>
<div id="right">
<p>Lorem ipsum dolor </p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>CSS Code:
Place this in a text file and name it style.css
*{margin:0;padding:0;} body { text-align:center; background-color: #cccccc; } #wrap { text-align:left; margin: 10px auto; min-width: 780px; max-width: 1260px; } #wrap #inside { margin: 10px 10px 0px 10px; padding-top: 10px; padding-bottom: 10px; } #header { background-color: blue; padding-top: 20px; padding-bottom: 20px; } #left { width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right { padding-left: 210px; padding-top: 20px; background: url('sidebar.png') repeat-y green; } #footer { background-color: red; padding-top: 20px; padding-bottom: 20px; }
The trick to making the left column appear to be fixed width is using an image that is a solid color filled with the color you want your left column to be.
I don’t bookmark sites but i will bookmark this! LOL!
Being a new blogger, I would like to tell you that you have given me much knowledge about it. Thanks for everything.