Heyy, I'm in the middle of making a design for a friend and was wondering why the wrapper division in the design is breaking apart. An example of what I mean can be found below along with my current source code and CSS. Any way to fix this? http://jordan-adams.co.uk/work/other/dmail/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DisposableMail</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div class="wrapper"> <div class="top"></div> <div class="mid"> <div class="content"> <h1>DisposableMail</h1> <span>Free disposable email addresses in seconds...</span> </div> <div class="sideBar"> </div> </div> <div class="footer"> </div> </div> </body> </html> HTML: @charset "utf-8"; /* CSS Document */ body { background: #444 url(img/bg.gif) top center no-repeat; font-family: Verdana, Geneva, sans-serif; font-size: 12pt; margin: 0; padding: 0; } .wrapper { width: 818px; margin: 50px auto; padding: 0; } .top { background: url(img/body-top.png) top center no-repeat; margin: 0; padding: 0; height: 49px; display: block; } .mid { background: url(img/body-mid.png) top center no-repeat; min-height: 14px; margin: 0; padding: 0; } .footer { background: url(img/body-bottom.png) top center no-repeat; margin: 0; padding: 0; display: block; height: 116px; } Code (markup):
1. Your background image doesn't repeat. 2. The h1 margin collapses through the parent, pushing it apart from the top. .mid { background:transparent url(img/body-mid.png) repeat-y scroll center top; margin:0; /*remove as redundant*/ min-height:14px; /*remove as unneeded*/ padding:1px; /*blocks margin collapse*/ } Code (markup): You need to give h1 some lateral padding. cheers, gary