Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > 2 div'а

Автор: Smorodin 20.3.2011, 08:07

Помогите, пожалуйста.
2 блока, друг рядом с другом. У одного фиксированная ширина, допустим, 200пикс, а второй - на все оставшееся в ширину место.
Спасибо.

Автор: Mavrun 20.3.2011, 09:45

Код


<div style="width:200px; float:left">sdfgdfs</div>
<div style="margin-left: 210px">fsdfdf</div>

Автор: Amphiluke 20.3.2011, 09:49

Код


.leftcol {
    background:#99FFCC;
    float:left;
    width:200px;
}
.maincol {
    background:#FFCC00;
}

Код


<div class="leftcol">
    <p>Помогите, пожалуйста.</p>
    <p>2 блока, друг рядом с другом. У одного фиксированная ширина, допустим, 200пикс, а второй - на все оставшееся в ширину место.</p>
    <p>Спасибо.</p>
</div>
<div class="maincol">
    <p>Помогите, пожалуйста.</p>
    <p>2 блока, друг рядом с другом. У одного фиксированная ширина, допустим, 200пикс, а второй - на все оставшееся в ширину место.</p>
    <p>Спасибо.</p>
</div>

Добавлено через 2 минуты и 9 секунд
Опередили. smile

Автор: Smorodin 20.3.2011, 09:54

Спасибо =)

а если правый блок надо приспустить вниз на 300px, они оБа опускаются....
Простите за тупые вопросы, с версткой 100 лет не работал..

Автор: Amphiluke 20.3.2011, 10:05

А вы используйте для смещения не margin-top, а padding-top

Код


.leftcol {
    background:#99FFCC;
    float:left;
    width:200px;
}
.maincol {
    margin-left:210px;
    padding-top:300px;
}
.maincontent {
    background:#FFCC00;
}

Код


<div class="leftcol">
    <p>Помогите, пожалуйста.</p>
    <p>2 блока, друг рядом с другом. У одного фиксированная ширина, допустим, 200пикс, а второй - на все оставшееся в ширину место.</p>
    <p>Спасибо.</p>
</div>
<div class="maincol">
    <div class="maincontent">
        <p>Помогите, пожалуйста.</p>
        <p>2 блока, друг рядом с другом. У одного фиксированная ширина, допустим, 200пикс, а второй - на все оставшееся в ширину место.</p>
        <p>Спасибо.</p>
    </div>
</div>

Автор: Smorodin 20.3.2011, 10:33

Спасибо большое!
Когда последний раз верстал - все верстали еще таблицами =)