Child Float Divs Выход из родительского Div

Question

Я прочитал много других постов здесь об этой проблеме безрезультатно. Я хочу, чтобы фоновый рисунок увеличил всю длину страницы, но он идет только на 2/3 пути вниз.

html, body { height: 100%; }

div#body-wrapper {
   height:100%;
   position:relative;
}

nav#side-navigation {
   height:100%;
   width:185px;
   background-color:#C2F4C2;
   float:left;
}

div#content-wrap {
   width:775px;
   height:100%;
   float:right;
   position:relative;
   background:transparent url(../images/global/column_corner.gif) no-repeat top left;
}

Если я добавлю переполнение: скрытый к # body-wrapper, он отрезает часть нижней части сайта.

Наконец, вот активный исходный код: http://freshbaby.com/v20/about_us/index.cfm

Answer 1

Вы можете добавить элемент после плавающих элементов, чтобы «очистить» поплавки.

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

Answer 2

Вы должны очистить: оба после поплавков.

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

Answer 3

Помните, что тег break также очищает плавающие числа.

<br clear='left'/>
<br clear='right'/>
<br clear='all'/>

Answer 4

Не уверен, было ли это когда-нибудь решено, но попробуйте добавить следующее в body и html: padding: 0;margin: 0;

Если это не поможет, поместите фоновое изображение в селектор html со следующим атрибутом: background: url(../assets/image.jpg);-moz-background-size: cover; -webkit-background-size: cover; background-size: cover;