Clever Geek Handbook

Child with Float Divs Violating Parent Div

I have read many other posts here about this issue. I want the background graphics to expand the full length of the page, but it only allows 2/3 of the path to pass.

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;
}

If I add an overflow: hidden in the # body-wrapper, it cuts off a portion of the bottom of the website.

Finally, here's the active source code: http://freshbaby.com/v20/about_us/index.cfm

+3


source to share


4 answers


You can add an element after the floats have cleared the floats.



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


source


You have to clean: like after the floats.



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


source


Not sure if this has ever been solved, but try adding the following to body and html: padding: 0; margin: 0;

If that doesn't do the trick entirely, then put the background image in an html selector with the following attr: background: url(../assets/image.jpg);-moz-background-size: cover; -webkit-background-size: cover; background-size: cover;

+1


source


Something very useful to remember is the break tag also clears the float.

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


source






More articles:


All Articles