darkie, три резины ?
а выравнивание по низу надо?
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
<title>3-col layout via CSS</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body>
<div id="header"><div class="column-in">
<h1>3-col layout via CSS</h1>
<p>
No tables, no absolute positioning (no positioning at all), <strong>no hacks(!),</strong> same height of all columns.
The left and right columns have fixed width (150px), the middle one is elastic. Any (zero or non-zero) margin of the body may be used.
It works (AFAIK) in any modern browser - I tested it in IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac, Mozilla, Safari, and Camino.
It won't work in old browsers poorly supporting CSS (like NN4, IE4 etc).
</p>
</div></div>
<div id="main">
<div id="left"><div class="column-in">
<h4>Left Col</h4>
<p id="lccont">
This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
This is content of the LEFT column. It can be <a href="javascript:toggleContent('lccont',1)">short</a>, <a href="javascript:toggleContent('lccont',3)">longer</a> or <a href="javascript:toggleContent('lccont',10)">very long</a>.
</p>
</div></div>
<div id="right"><div class="column-in">
<h4>Right Col</h4>
<p id="rccont">
This is content of the RIGHT column. It can be <a href="javascript:toggleContent('rccont',1)">short</a>, <a href="javascript:toggleContent('rccont',3)">longer</a> or <a href="javascript:toggleContent('rccont',10)">very long</a>.
</p>
</div></div>
<div id="middle"><div class="column-in">
<h4>Middle Col</h4>
<p id="mccont">
This is content of the MIDDLE column. It can be <a href="javascript:toggleContent('mccont',1)">short</a>, <a href="javascript:toggleContent('mccont',10)">longer</a> or <a href="javascript:toggleContent('mccont',40)">very long</a>.
</p>
</div></div>
<div class="cleaner"> </div>
</div></div>
<div id="footer"><div class="column-in">
<h4>The footer</h4>
<p>
Anything follows here...
</p>
</div></div>
<hr>
</body>
</html>
|
| Код |
body { margin: 0pt; padding: 0pt; font-family: sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11pt; line-height: 1.5; font-size-adjust: none; font-stretch: normal; }
#header { margin: 0pt; padding: 0pt; background: yellow none repeat; }
#main { margin: 0pt; padding: 0pt; }
#left { margin: 0pt; padding: 0pt; float: left; width: 20%; font-size: 80%; }
#right { margin: 0pt; padding: 0pt; float: right; width: 20%; font-size: 80%; }
#middle { margin: 0pt 20%; background: yellow none repeat; font-size: 80%; }
#footer {text-align:center;}
.column-in { margin: 0pt; padding: 0.5em 1em; }
.cleaner { border: medium none ; margin: 0pt; padding: 0pt; clear: both; height: 1px; font-size: 1px; }
h1, h2, h3, h4 { margin: 0.2em 0pt; }
p { margin: 0.5em 0pt; }
a { color: black; }
.copy { text-align: center; font-size: 80%; }
|
это навскидку переделано из верстки с фиксированными боковушками
раскраски нет, я её снёс потому как была для фиксированных
ну или можешь использовать таблицу
|
