Растягиваем на примере шаблона "Minima" блог по ширине окна браузера

Немного о том почему я здесь привожу этот пример - если задать блок основного текста и правый сервисный блок "sidebar" размер в процентах, то на большом разрешении наш сайдбар будет неприлично широк, а информации в нем от этого не добавится- вот чтобы этого не происходило нужно сделать сайдбар фиксированой ширины, а основной блок - плавающим, т.е. чтоб он автоматом заполнял остаток пространства слева от сайдбара.

1. правим #outer-wrapper (обертка для всего содержимого блога) до ширины 100%

#outer-wrapper {
width: 100%;
text-align:left;
font: $bodyfont;
}

2. Aналогично поступаем с #main-wrapper (обертка для основного содержимого, того что будет левее сайдбара). ну ещё я убрал из него padding (на ваше усмотрение), но самый главное - margin-right: -220px! отрицательное поле шириной в сайдбар позволяет этому самому сайдбару втиснуться между основным содержимым и правым краем браузера. word-wrap и overflow удаляем, т.к. в нашем варианте они абсолютно недееспособны (текст все равно будет залазить на сайдбар) вместо них мы сделаем по другому, позже...

#main-wrapper {
width: 100%;
float: left;
margin-right: -220px;
text-align: justify;
}

3. меняем #sidebar-wrapper, из него также удаляем word-wrap и overflow и всё (если я не ошибаюсь больше в нём ничего не было)

#sidebar-wrapper {
width: 220px;
float: right;
}


если сейчас сохранить шаблон и посмотреть на то что вышло -то содержимое блога (текст) налазит на сайдбар, чтобы исправить делаем следующее:

4. создаём вспомогательный тип - #main-content-wrapper :

#main-content-wrapper {
margin-right: 240px;
}

это уменьшит такой блок на 240 пикселей справа, а блоком этим и будет наше содержимое блога, в принципе можно ставить и 220 пикселей, но тогда буквы будут прилипать вплотную к сайдбару-осталось только этот блок создать в теле блога:

5. находим и сразу за ним ставляем , а перед закрвающим этот блок добавляем ещё один. вот так у меня:

<div id='main-wrapper'>
<div id='main-content-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
</div>

Теперь должно быть все в порядке.

____________________________________________________________________________________________________

Поделиться

____________________________________________________________________________________________________

Похожие по тематике статьи :

*

• Выводим теги для блога в виде выпадающего списка
• Вывод похожих (схожих) тем (постов)
• Тюнинг шаблона
• Всплывающая при наведении курсора панель навигации Blogger
• Как сделать другой рисунок при наведении курсора?
• Оформление цитат. Все очень просто.
• Установка Google Friend Connect на Blogger
• Виджет Вертикальное Scroll Menu для Blogger
• Flash-8(Preloader)"прелоадер", Preloader-показатель загрузки объекта

.