Резиновая блочная верстка в 4 столбца

Сегодня подбросили интересную идею в плане верстки. А именно возможность создания 4 колонок (без таблиц, используя полностью блочную верстку), одна из которых будет резиновой. Задача в общем-то не столь трудная, но получилась довольно интересная smile

Что примерно требовалось:

Резиновая блочная верстка в 4 столбца


Изначально было несколько идей:

1) - три блока с фиксированной шириной сделать position absolute, выровнять их по нужным местам, а основной резиновый блок отделить паддингом или марджином (кому что удобнее)

2) - попытаться попробовать варианты с разными float

3) - float + "матрешка"

Подумав, я остановился на третьем варианте, потому что в первом были свои проблемы с использованием абсолютного позиционирования, во втором с кроссбраузерностью = )

Итак, схема блоков и выравнивания:

Резиновая блочная верстка в 4 столбца


ну и сам html:

    <div class="block1">
        <p>1-ая колонка</p>
    </div>
    
    <div class="right-block">
        <div class="block3">
            <p>3 колонка</p>
        </div>
        <div class="block4">
            <p>4-ая колонка</p>
        </div>
        <div style="clear: both;"></div>
    </div>
    
    <div style="" class="block2">
        <p>2-ая колонка (резиновая)</p>
    </div>


...и необходимый CSS к нему:

.block1 {
    background: #f3f3f3;
    width: 150px;
    height: 500px;
    float: left;
}

.right-block {
    width: 300px;
    height: 500px;
    background: #cccccc;
    float: right;
}

    .block3 {
        float: left;
        width: 150px;
        background: #e6e6e6;
        height: 500px;
    }
    
    .block4 {
        height: 500px;
        float: left;
        width: 150px;
    }
    
.block2 {
    background: #fff;
    height: 500px;
    margin: 0 300px 0 150px;
}


Вот и все smile

Работающий пример вы можете посмотреть по этой ссылке - Блочная резиновая верстка в 4 колонки

Спасибо Мише за подкинутую интересную задачу = )
BadBoyFromTheRai написал 2 декабря 2011 21:31
/ /
Давно эта тема не поднималась)
Смотрю народ оживился

Давно эта тема не поднималась)
Смотрю народ оживился
Похожие новости:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Последние новости:

Новый раздел на сайте!

8-07-2014, 20:39
На сайте появился новый раздел - Платные скрипты! В нем будут публиковаться отличные скрипты для ДЛЕ, которые добавляют тот или иной функционал в движок. Ждите появления отличных работ в данном разделе!

Обновления шаблонов на ваш вкус!

12-03-2014, 13:57
Так как мои идеи не безграничны, то прошу вас, как клиентов, высказывать пожелания для обновлений в комментариях к работам. Идеи, замечания, какие-то новшества - все будет учтено в новых версиях шаблонов! Жду ваших комментариев!
Test-Templates Google+

Test-Templates Youtube

Дружественные ресурсы:
Опрос
Купили бы вы версии наших шаблонов под WP?
Да, конечно
Нет, это не нужно
Не готов работать с WP