Div в две колонки float left. Две колонки, навигация слева. Резиновая верстка
На сайтах которые с давних пор стали псевдо учебниками, говеные школьники предлагают решения верстки двух колонок с помощью слоев.
http://htmlbook.ru/content/dve-kolonki-navigatsiya-sleva
Вся говеность раскрывается не сразу, а во время применения в главном слое контента float:left; с завершающим слоем clear:both;
В итоге говно верстка полностью разламывается на двое превращая и так кривой сайт в унылое говно.
Решение проблемы можно подсмотреть на mail.ru или на другом подобном криво сервисе.
Но даже там все прописано в процентах.
А как же сделать так чтобы левая менюшка была по ширине в 237 пикселей, а правое поле контента растягивалось на 100%
Вот тут даже сервисы типа мэил ру не помогут, потому как там не стали париться и все намалевали в процентах.
Американ сервис предлагающий платные шаблоны за большие бабки (оттуда кстати слил себе шаблончик 1хрен битрикс админ панели) тоже все хреначит на процентах..
Пролистав гугле порядка 30 первых сайтов по данному вопросу решил написать тут свое решение которое должно привести в ступор школоту и дать базу для реальных кодеров.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.main {
padding: 0 0 0 237px;
border: 1px solid #ff0000;
}
.pageLeft {
float: left;
margin-left: -237px;
overflow: visible;
padding-top: 15px;
width: 237px;
border: 1px solid #000000;
position: relative;
}
.pageContent {
float: left;
margin-right: -100%;
padding-top: 18px;
width: 100%;
border: 1px solid #000000;
position: relative;
}
.clear {
border: none;
clear: both;
float: none;
font-size: 0;
height: 0;
line-height: 0;
}
.block {
float: left;
width: 150px;
height: 50px;
border: 1px solid #0000ff;
}
</style>
</head>
<body>
<div class="main">
<div class="pageLeft">1230</div>
<div class="pageContent">123
<div class="block">
123000
</div>
<div class="block">
123000
</div>
<div class="block">
123000
</div>
<div class="block">
123000
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Решение в песочнице
|
