July 20, 201016 yr 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> @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; }
July 20, 201016 yr Yeah pretty much what mteam said. You need to put repeat-y on the middle background image and its the H1 margin-top that is breaking the gap.
Create an account or sign in to comment