Div не совместив надлежащим образом с помощью CSS сетки

Question

Я использую 960 Grid System на этой странице, где я перечисляю мои Instapaper закладку: http://labs.tonyhue.com/bookmarks/

Однако секция социальных медиа отправляется от остальные. Он должен быть выровнен справа от раздела программирования. Есть идеи?

Answer 1

Добавить (фиксированную) высоту к вашему .grid_6 -Контейнер.

.grid_6 {height:250px; /*or something else*/} 

Ваша проблема возникает на плавающих элементах различной высоты.

Nice чтения о плаваниях: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Edit: В противном случае вы можете добавить элемент обертки, чтобы очистить поплавки:

<div class="wrapper"> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
</div> 

<div class="wrapper"> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
</div> 

Вы можете очистить поплавки с .wrapper {overflow:hidden;}ИЛИ вы можете используйте метод clearfix: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/