Javascript.RU

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>

Решение в песочнице

-2

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 01:05
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 02:24
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:19
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:00
#permalink

Автор: FNAF WORLD (не зарегистрирован), дата: 10 августа, 2022 - 10:15
#permalink

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.


Автор: Гость (не зарегистрирован), дата: 7 апреля, 2023 - 11:40
#permalink

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. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
18 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum