Резиновая блочная верстка в 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
/ /
Давно эта тема не поднималась)
Смотрю народ оживился

Давно эта тема не поднималась)
Смотрю народ оживился
admiral написал 11 марта 2015 15:37
/ /
Есть одно НО!
.block2 {
background: #fff;
height: 500px;
margin: 0 300px 0 150px;
overflow:hidden;
}

Иначе при добавлении заголовка HTML (например <h3>), поедет фон в Вашем примере.
А так норм всё, спасибо!
Похожие новости:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Последние новости:

dle-templates.com - новый вид мошенничества

25-05-2015, 22:23
Я давно знаю о ресурсе dle-templates.com. Он пришел на смену складчику, когда пользователи на складчине поумнели немного и стали покупать в основном для своих личных целей, а не для перепродажи. Я конечно понимаю людей, когда хочется купить что-то подешевле. Скинуться и приобрести что-то для своих

Уникальные шаблоны по уникальным ценам!

24-02-2015, 14:05
С 24 февраля по 15 марта действует офигенная скидка на разработку уникального шаблона - всего $200 за готовый шаблон! Спешите успеть сделать заказ!
Test-Templates Google+

Test-Templates Youtube

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