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>
Решение в песочнице
|
Roksa glo
Poznań ogłoszenia erotyczne
Roksa pl bolesławiec
Roksa ożarów mazowiecki
After 8 years of releasing Five Nights At Freddy's, there are many websites specializing in FNAF games, in which FNAF WORLD is one of the websites chosen by many players.
Choose your own route to a life filled with action, excitement, and unexpected discoveries so that you may live the life you want to live. life the game
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.