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

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

Форум программистов > Вёрстка веб-сайтов > Два div'а рядом, первый - "резиновый" по ширине

Автор: abb 24.4.2009, 17:11

Добрый день!

Есть два div'а (стр. 3 и 5), которые нужно разместить в третьем (стр. 1) по ширине в одну линию, учитывая, что ширина первого неизвестна ("резина").
При добавлении стиля width:100% к первому, второй уходит ниже (не помещается), а без размера - первый не растягивается.

Код


<div style = "height:33px;">

    <div style = "height:33px; background-image:url(vl.bmp); background-repeat:repeat-x; float: left;"></div>
        
    <div style = "width:33px; height:33px; background-image:url(vu.bmp); float: left;"></div>
    
</div>

Как сделать так, чтобы они были в одну линию и первый нормально растягивался?

Автор: NDenis 24.4.2009, 17:33

ширина второго известна? если да, то для резинового css-правила

Код


margin-right:-33px; /* ширина второго блока */
width:100%;

Автор: abb 24.4.2009, 18:20

Не подходит, т.к. 1 и 2 div'ы наполнены фоном, который в этом случае накладывается друг на друга

Автор: bars80080 24.4.2009, 19:43

сделать таблицой табличную вёрстку

Автор: Violator 27.4.2009, 15:45

abb,

Код


  .container {height:33px;}
  .left {height:33px; background-image:url(vl.bmp); background-repeat:repeat-x;}
  .right {width:33px; height:33px; background-image:url(vu.bmp); float:right}
  * html .right {position:relative; left:-3px; margin-right:-3px;}

Код


  <div class="container">
    <div class="right"></div>
    <div class="left"></div>
  </div>

Автор: ksnk 27.4.2009, 16:08

Вот на таблицах

Код


table{border:0; border-collapse:collapse; }

table.container { width:100%;  table-layout:fixed;}
table.container th {height:33px; background-image:url(vl.bmp); background-repeat:repeat-x;}
table.container td {height:33px; background-image:url(vu.bmp); }

Код



<table class="container"><col width="auto"><col width="33px"><tr>
<th></th>
<td></td>
</tr></table>

При этом на медленной машине IE6 довольно заметно тормозит на плавающих и абсолютных элементах, а вот на табличных - летает smile

Violator, а к чему вот эта магия?

Код


* html .right {position:relative; left:-3px; margin-right:-3px;}

Автор: Violator 27.4.2009, 16:26

ksnk,
http://forum.vingrad.ru/index.php?showtopic=246868&view=findpost&p=1781546

Автор: WebMast 27.4.2009, 17:02

Делаешь первый див с статичой шириной. Потом второму диву делаешь отступ от края..

Код


<div id="left">
Left
</div>
<div id="right">
Right
</div>

Код


#left{
float:left;
width:200px;
}
#right{
margin-left:210px;
}

Этот вариант должен работать ; ).

Автор: Violator 27.4.2009, 17:10

WebMast,
в условии же написано первый - резиновый, при этом там используются бэкграунды которые я так понимаю должны сходится, так что маргин не должен быть больше длины первого, если же вы поставите маргин 200px вы всеравно столкнетесь с багом 3px в ИЕ6

Автор: WebMast 28.4.2009, 19:12

А если так?

Код


<div id="block">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>

Код


#block{
background:url('{bg-img-src}');
}
#left{
margin-right:210px;
background:none;
}
#right{
float:right;
width:200px;
background:none;
}

{bg-img-src} - путь к фоновому изображению. Который включает в себя и правый и левый дивы..

Не ругайтесь. Мне просто интересны разные пути решения..

Автор: Wowa 1.5.2009, 11:09

А почему вы указываете height в диве? Он ведь не поддерживается в ИЕ.