Доброй ночи, парни!
Не хочу злоупотреблять Вашим временем, но сейчас реально для меня серьезный вопрос, который позволит понять div-ную верстку еще конкретнее.
Я написал код (я приложил его к этому сообщению - простой текстовый файл).
Код элементарный, в нем я разбираюсь с этой самой версткой, но я в тупике - я не могу сделать третью колонку.. точнее, не могу поставить блок "side bar" вверх-справа. Посмотрите, пожалуйста код - скажите чего не хватает? Или где я допустил ошибку?
К сожалению, я не нашел опции "приложить изображение", я помещу код прямо в свое сообщение:
<html>
<head>
<title>Изучение CSS</title>
<style type="text/css">
#header {
border: 2px solid #cdcdcd;
background: #3a3f44;
height: 150px;
}
#container {
border: 2px solid #123654;
width: 100%;
background: #f4f4eb;
float: left;
}
#content {
border: 2px solid #cdcdcd;
margin-right: 200px;
background: #f4f4eb;
}
#main {
border: 2px solid #CC0029;
margin-left: 150px;
}
#sidebar {
border: 2px solid #cgku88;
width: 200px;
float: right;
background: #f4f4eb;
}
#left {
border: 2px solid #548695;
width: 150px;
float: left;
}
#footer {
border: 2px solid #cecea5;
background: #f4f4eb;
}
</style>
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="container">
<div id="content">
<div id="left">
<h1>navbar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div id="main">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.</p>
<p>Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.</p>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<p> Типа сайт-бар. Или что там угодно</p>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
А вот такая фигня с кодом (вес картинки 97кб):
http://images.people.overclockers.ru/149340.jpg
И еще два вопроса в догонку: при помощи чего следует описать, чтобы колонки были фиксированной ширины, а растягивался только их фон (вставить еще один контейнер?) с шапкой сайта?
Помогите, парни!