| |
|
|
| |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Четыре колонки</title>
<style>
body {
background-color:grey;
}
#top {
text-align:center;
position:absolute;
left:10px;
top:10px;
height:80px;
right:10px;
background-color:orange;
}
#left {
text-align:center;
position:absolute;
left:10px;
top:100px;
bottom:10px;
width:200px;
background-color:#8f8;
}
#midle {
position:absolute;
left:225px;
top:100px;
bottom:10px;
right:225px;
background-color:grey;
}
#midlel {
text-align:center;
margin-right:50%;
position:absolute;
top:0px;
right:5px;
bottom:0px;
width:50%;
background-color:#9ff;
}
#midler {
text-align:center;
margin-left:50%;
position:absolute;
top:0px;
left:5px;
bottom:0px;
width:50%;
background-color:#f9f;
}
#right {
text-align:center;
position:absolute;
right:10px;
top:100px;
bottom:10px;
width:200px;
background-color:#89f;
}
</style>
</head>
<body>
<div id="top">
Заголовок
</div>
<div id="left">
Левая колонка
</div>
<div id="midle">
<div id="midlel">
Левый центр
</div>
<div id="midler">
Правый центр
</div>
</div>
<div id="right">
Правая колонка
</div>
</body>
</html>
|
Вот! Пользуйтесь на здоровье :-) | |
| |
|
