Проблемы с колоннами одинаковой высоты

Question

Это мой CSS:

#contents { clear: both; width: 900px; background: #fff url(../img/contents_bg.jpg) repeat-y; }
#contents .left { float: left; width: 615px; padding: 10px 0 0 20px; }
#contents .right { float: right; width: 225px; padding: 10px 20px 0 0; }

И HTML:

<div id="contents">
 <div class="left">
  <p>test</p>
 </div>
 <div class="right">
  <p>test 2</p>
 </div>
</div>

По какой-то причине фоновое изображение contents_bg.jpg не будет отображаться, если я не добавлю высоту на #contents, что я не могу сделать, какие-либо идеи?

Answer 1

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