Я пытался придумать специальный макет с двумя столбцами.
В основном это требования
- Фиксированная ширина и по центру
- Высота 100%
- Верхний и нижний колонтитулы всегда видны
- 2 столбца содержимого (основной - справа)
- Прокрутка основного столбца при переполнении
- Исправлена правая колонка
Вот код, который у меня есть. Я просто не смог сосредоточиться
весь макет.
Live www.onlinesportcenter.com
код
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SPECIAL 2 COLUMN LAYOUT</title>
<style type="text/css">
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
* html body {
padding:120px 0 20px 0;
}
#header {
position:absolute;
top:0;
left:0;
width:1004px;
height:119px;
overflow:auto;
background:#73a2bd;
border-bottom:1px solid #35759a;
text-align:center;
}
* html #header {height:120px;}
#header p {
color:#fff;
margin:2px 0 0 0;
}
#header ul {
clear:both;
text-align:center;
border-top:1px solid #73a2bd;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
}
#header ul li {
display:inline;
color:#73a2bd;
}
#container {
font-family: Arial, sans-serif;
font-size: 1.2em;
position:fixed;
top:120px;
left:0;
bottom:20px;
right:0;
background:#fff;
padding:0;
width:1004px;
}
* html #container {
height:100%;
width:1004px;
}
#container img {margin:5px;}
#main {
width:774px;
height:100%;
float:left;
overflow:auto;
}
#right {
width:228px;
height:100%;
float:right;
border-left:1px solid #73a2bd;
border-right:1px solid #73a2bd;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:1004px;
height:19px;
overflow:auto;
text-align:center;
background:#73a2bd;
border-top:1px solid #35759a;
}
* html #footer {height:20px;}
#footer p {
color:#fff;
margin:2px 0 0 0;
}
</style>
</head>
<body>
<div id="header">
<p>HEADER</p>
</div>
<div id="container">
<div id="main">
<p>
MAIN
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
<div id="right">
<p>
RIGHT
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div>
</div>
<div id="footer">
<p>FOOTER</p>
</div>
</body>
</html>