Верстка в три колонки.

Casufi · April 15, 2008

Возвращаюсь к версте в три колонки

Есть такой набор блоков

 
HTML код
 <div class=all_page>
 <div class=left_content_border>
 <div class=left_content>
 <img src="/site_resources/images/sidebanner.jpg"/>
 <div class=second_menu>
 Это первый блок 
 </div>
 </div>
 </div>
 <div class=right_content_border>
 <div class=right_content>
 Это второй блок

 Он должен находиться справа от первого

 </div>
 </div>
 <div class=right_banner>
 <a href=http://www.lipsum.com/>Lorem ipsum</a>
 </div>
 <div class=third_menu>
 </div>
 </div>


CSS

.left_content_border{
 width: 248px;
 float: left;
}
.left_content {

}

.second_menu {
 padding: 10px;
}

.right_content_border {
 float: left;
 margin-right: 100px;
}

.right_content {
 padding: 40px;
 margin-left: 4px;
 margin-right: 4px;
}

.right_banner {
 text-decoration: none; 
}

.third_menu {
 clear: both;
}

Если второму блоку я указываю свойство float: left он перестает реагировать на margin-right: 100px; и его ширина определяется по контенту.

Более того, если я вставляю некое количество текста в этот блок он и вовсе уезжает вниз, под первый блок

По задумке ширина второго блока должна ограничиваться первым блоком слева и блоком right_banner справа, при наполнении текстом содержимое этого блока должно растягивать весь сайт вниз и находится между первым блоком и боковым баннером

Вот ссылка на страницу целиком

http://mail.avtodin.ru/site_resources/htmls/main_page1.html

Вот ссылка на таблицу стилей

http://mail.avtodin.ru/site_resources/css/main_page.css