1

Тема: Как растянуть поле для контента?

Люди добрые, помогите кто чем может! smile Не могу решить задачку. Надо растянуть до низа поле для контента. Для наглядности привожу код (из файла стилей) и прикладываю скрин темы.

/** BEGIN content **/
#content {
    width: 560px;
        background: #ffffff;
    float: left;
    padding: 10px 10px 0px 10px;
}
    #content .latest {
        padding: 0px 0px 0px 10px;
    }
        #content .latest h2 {
            margin-bottom: 0px;
            font-size: 1.5em;
        }
            #content .latest h2 a {
                color: #2d2d2d;
            }        
            #content .latest h2 a:hover {
               color: #000;
            }
        #content .latest .details {
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 0.9em;
            color: #000;
        }
            #content .latest .details a {
                color: #2d2d2d;
            }
            #content .latest .details a:hover {
                color: #000;
                text-decoration: none;
            }
        #content .latest p {
         text-align: justify;
        }        
    #content p {
        line-height: 1.3em;
        margin-bottom: 10px;
    }
    #content ul {
        margin: 0 0 10px 16px;
    }
    #content ol {
        margin: 0 0 10px 18px;
    }
    #content li {
        line-height: 1.3em;
        padding: 2px 0;
    }
    #content h3 {
        font-size: 1.5em;
        font-weight: normal;
    }
    #content blockquote {
        padding: 10px 10px 0;
        border: 1px solid #cccccc;
        background-color: #eeeeee;
        font-weight: bold;
        margin-bottom: 10px;
    }
/** END content **/

http://dating-web.name/2010-01-18_225722.jpg

2

Re: Как растянуть поле для контента?

Для колонок "одинаковой высоты" один из самых простых способов
http://habrahabr.ru/blogs/css/64242/

3

Re: Как растянуть поле для контента?

searchingman пишет:

Для колонок "одинаковой высоты" один из самых простых способов
http://habrahabr.ru/blogs/css/64242/

Там есть такие слова:

Осталось только задать фон для колонок и сделать их плавающими. Работает везде.
Все по стандарту. Делаем большой паддинг снизу, это дает бэкграунд вниз. Ровно таким маргином компенсируем отступ. Родительский див отрезает лишнее.
Пример

Так вот, ссылка "Пример" не работает. Что за родительский див, который отрезает лишнее? Если просто добавить padding-bottom:1000px;, то высота будет именно такой, а не плавающей.

То, что в комментах, ходил по ссылкам, но решения не нашел...

4 (19-01-2010 10:01:47 отредактировано searchingman)

Re: Как растянуть поле для контента?

Если вам сложно разобраться в блочной верстке сверстайте таблицей (<table>).
<table><tr>
<td>вывод постов</td> <td>вывод сайдбара</td>
</tr></table>
Там всегда колонки одинаковой высоты.

5

Re: Как растянуть поле для контента?

Спасибо. Есть у кого-нибудь другие варианты?

6

Re: Как растянуть поле для контента?

Я бы например не стал ничего растягивать, а блок в котором находится запись (он  вас серого цвета) сделал бы белым. Тогда визуально у вас все выровнялось бы.

Специалист - это человек умело обходящий все мелкие ошибки на пути к грандиозному провалу =)

7

Re: Как растянуть поле для контента?

kuzmi4 пишет:

Я бы например не стал ничего растягивать, а блок в котором находится запись (он  вас серого цвета) сделал бы белым. Тогда визуально у вас все выровнялось бы.

kuzmi4, здравствуйте! Там не очень видно, на самом деле это бекграунд серый, а блоку для записей прописан белый цвет. Я понимаю, что всё равно растянется, когда там появится запись. Но, а вдруг запись будет короткая, как в данном случае? Тогда под записью будет оставаться серое поле...

8

Re: Как растянуть поле для контента?

Раз уж всё так грустно, то сделайте div который будет сразу же после картинки.

<div class="globContent">
        <div class="leftMain">тут ваш основной контент</div>
        <div class="sidebar1">сайдбар #1</div>
        <div class="sidebar2">сайдбар #2</div>
</div>

в css:
.globContent{background:#FFF;}

http://ezg.su

9 (19-01-2010 21:43:10 отредактировано searchingman)

Re: Как растянуть поле для контента?

kuzmi4 пишет:

Я бы например не стал ничего растягивать, а блок в котором находится запись (он  вас серого цвета) сделал бы белым. Тогда визуально у вас все выровнялось бы.

Уход от решения не всегда есть хорошо wink
Очень часто дизайнеры "рисуют" макеты с колонками "одинаковой" высоты.

auditor пишет:

... а вдруг запись будет короткая, как в данном случае? Тогда под записью будет оставаться серое поле..

Вот еще пример, хоть и более сложный чем по 1й ссылке
http://chikuyonok.ru/2009/06/float-columns/

10

Re: Как растянуть поле для контента?

searchingman пишет:

Уход от решения не всегда есть хорошо wink
Очень часто дизайнеры "рисуют" макеты с колонками "одинаковой" высоты.

А никто и не уходит. Просто в данном случае я не вижу целесообразным делать запись одинаковой высоты с сайдбаром (это не корректно т.ч. зрения верстки), потому что запись является вложенным блоком, и может быть не одна. Просто если растянуть сам блок записи а потом добавить еще одну - будет хрень. Если уж выравнивать блоки, то только тот в который включена запись и сайдбар, а судя по рисунку они выровнены. Для визуализации можно просто серый цвет изменить на белый.

Специалист - это человек умело обходящий все мелкие ошибки на пути к грандиозному провалу =)

11

Re: Как растянуть поле для контента?

kuzmi4 пишет:

Просто если растянуть сам блок записи а потом добавить еще одну - будет хрень.

Я имел ввиду выравнивать не блок записи , а контейнер в котором лежат блоки-записи.

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

12

Re: Как растянуть поле для контента?

Я создал блок box и в него разместил content+sidebar

#box {
    position: absolute;
    min-height: 100%;
    z-index:-100;
    background-color: #FFF;
    width: 960px;
    margin-top: 0px;
   
    }