Растянуть ширину div, чтобы соответствовать другому

Question

У меня есть HTML-макет, подобный следующему:

<div id="header"></div> 
<div id="body"></div> 
<div id="footer"></div>

Если заголовок имеет фиксированную ширину, как я могу заставить его растягиваться в соответствии с шириной тела - для случаев, когда тело шире заголовка.

Answer 1

Во-первых, инкапсулируйте все ваши divs в родительском div. Это устанавливает границу, чтобы препятствовать тому, чтобы некоторые divs перерастали других, и делает хак с минимальной шириной немного более легким в использовании.

<div id='container'>
  <div id='header'></div>
  <div id='body'></div>
  <div id='footer'></div>
</div>

Затем в вашем CSS используйте следующий хак min-width, чтобы директива минимальной ширины работала во всех браузерах. Детали того, как это работает, включены в комментарии. Обратите внимание, что когда я ссылаюсь на IE, я имею в виду IE 6-7, я считаю, что IE 8 работает как все другие браузеры.

#header {
   min-width:800px;   /*minimum width for non-ie browsers, ignored by ie*/
   width: 100% !important; /*width will autoexpand as necassary in non-ie browsers*/
   width: 800px;  /*ie uses width as a min-width by default.*/  
   /*Also IE ignores !important and instead uses the last directive found*/
}

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

Answer 2

Я согласен с Яном Эллиоттом, я подозреваю, что вам это действительно не нужно. Может быть, подойдет центрирование.

Если вам нужен инструмент, который позволяет заголовку соответствовать ширине с содержимым, которое следует, таблица является этим инструментом. Таблица с тремя строками в одну ячейку создаст макет, который вы хотите, и раньше это был стандартный способ размещения сайтов. Вы пытаетесь соответствовать старому макету?