Проблемы с макетом CSS, плавающие элементы, вложенные элементы div

Question

Хорошо, я получил некоторую полезную информацию на этом персональном сайте, над которым я уже работаю. Где-то в моем беспорядочном беспорядке вложенных div я создал некоторые проблемы для себя. Я поместил и это изображение, и текст рядом с ним внутри другого div и центрировал этот div, что нормально. Но чтобы начать новый абзац под ним, я должен поместить этот абзац в div, потому что плавающие над ним должны быть очищены (или он отображает текст в этом правом поле рядом с div). Я уверен, что есть более простой способ сделать то, что я хочу сделать. Если кто-то сможет взглянуть на мой код и понять, в чем причина неправильной структуры, это очень поможет ... большое спасибо.

Как вы можете видеть, заголовок с надписью "Недавние работы" центрируется так, как это должно быть, но ему обычно не дают поля из поля выше.

Вот ссылка:

http://danberinger.com/

Answer 1

поместите overflow:hidden; в селектор div#intro_container в строке 110

Чтобы понять, почему это работает, прочитайте это здесь: http://csswizardry.com/floats/

Answer 2

Проблема в том, что intro_container не занимает полный рост своих детей. Вы получите желаемый эффект, поместив элемент с установленным стилем очистки после 2-х div, которые вы плаваете:

<div id="intro_container">

  <div id="messagebox">
    ...
  </div>

  <div id="picture">
    ...
  </div>

  <div style="clear: both"></div>
</div>

Это даст "Recent Work" нормальное заполнение.

Answer 3

Я думаю, что CSS clearfix будет делать именно то, что вы описываете, без необходимости портить ваш код дополнительными элементами div. http://www.webtoolkit.info/css-clearfix.html Просто добавьте стили CSS и класс .clearfix к любым элементам div, которые сваливаются от плавающих дочерних элементов.