Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > дивная резиновая вёрстка


Автор: bars80080 12.4.2011, 17:55
то ли дело к вечеру, то ли я совсем затупил

надобно сверстать две колонки, обе резиновые, но имеют минимальную ширину ниже которой они не могут сжиматься.
на картинке видно, что колонка А имеет поля, а колонка Б прижата к правому краю
проблема возникает как раз в полях. никак не могу придумать, как совместить резиновую ширину и заданные поля.

причём, ширину полей можно было бы тоже оставить резиновыми, но колонка А никогда не должна прикасаться ни к левому краю, ни к колонке Б

что-то кручусь рядом, а осилить не могу

Автор: seodon 12.4.2011, 20:05
Может так? На кроссбраузерность не проверял, смотрел только в Лисе и Опере.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <style type="text/css">
   body {
    margin:0;
   }
   #b {
    width:40%;
    background:green;
    height:300px;
    float:right;
   }
   #a_wrap {
     width:60%;
   }
   #a {
    height:300px;
    background:red;
    margin:20px;
   }
  </style>
 </head>
 <body>
  <div style="min-width:540px">
   <div id="b">B</div>
   <div id="a_wrap">
    <div id="a">A</div>
   </div>
  </div>
 </body>
</html>

update: убрал лишнее.

Автор: Котокобра 12.4.2011, 21:42
Цитата(bars80080 @  12.4.2011,  17:55 Найти цитируемый пост)
надобно сверстать две колонки, обе резиновые, но имеют минимальную ширину


распорки? наподобие

Код

<div>
    <div style="width:100px; height:1px;"></div>
    ля-ля-ля
</div>


или

Код

<div>
    <img src="dot.gif" width="100" height="1" />
    ля-ля-ля
</div>

Автор: bars80080 15.4.2011, 11:11
только сейчас смог вернуться к этой теме

как всё оказывается просто. меня из колеи min-width выбивал.

seodon, спасибо, работает везде, даже в ИЕ6 что-то похожее отображается





Котокобра, не понял вообще о чём вы

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)