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

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

Форум программистов > Вёрстка веб-сайтов > 3 дива в одной строке

Автор: Guedda 25.2.2010, 16:13

Добрый день. есть три дива (левый, центральный и правый).
Необходимо сделать так, чтобы ширина левого и правого дива изменялась, если изменяется ширина центрального дива.
говоря проще, необходимо по центру выставлять баннер (разной ширины). Как поступить? Жду ваших советов. Заранее благодарен.

Автор: bars80080 25.2.2010, 16:29

не задавать им ширину. сами откалибруются

Автор: Guedda 25.2.2010, 16:31

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

Добавлено через 40 секунд
А если не задавать ширину, то левый и правый дивы не показываются (они пустые, просто нужны для цвета).

Автор: Violator 25.2.2010, 16:59

Guedda,

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>тест</title>
  <style type="text/css">
    * { margin: 0; padding: 0; }
    table { border-collapse: collapse; }
    .left { background: green; }
    .center { background: red; }
    .right { background: blue; }
    .banner { width: 200px; }
  </style>
</head>
<body>
  <table width="100%">
    <col width="50%">
    <col width="auto">
    <col width="50%">
    <tr>
      <td class="left">Left
      </td>
      <td class="center">
        <div class="banner">Banner
        </div>
      </td>
      <td class="right">Right
      </td>
    </tr>
  </table>
</body>
</html>

Автор: SelenIT 25.2.2010, 17:01

Как вариант:

Код


<!doctype html><!-- стандартный режим -->
<style>
.left_bg { width: 100%; background: green; }
.right_bg { width: 50%; background: blue; margin: 0 0 0 auto; }
.banner_wrapper { width: 200%; margin: 0 0 0 -100%; /* растягиваем обратно на ширину первого предка */ }
.banner { width: 468px; height: 60px; margin: 0 auto; background: white; color: orange; border: 2px solid; }
</style>
<div class="left_bg">
   <div class="right_bg">
      <div class="banner_wrapper">
          <div class="banner">Баннер произвольной ширины</div>
      </div>
   </div>
</div>

Автор: Guedda 25.2.2010, 17:22

А в нетабличной верстке никак? Если только дивами...

Автор: Guedda 25.2.2010, 17:40

SelenIT, спасибо огромное. Проблема решена.