Thread: Getting rid of gaps between divs

**Michael** · 22 May 2009 @ 10.23

I am trying to get rid of a gap between two divs, I have used body

Code:

{margin:0;padding:0;}

in my CSS too which has me confused. Any ideas? Thank you.

EDIT: Somehow the gap disappeared after adding content below the div, very odd but it is fixed now

**Michael** · 22 May 2009 @ 13.27

Actually this is no longer solved, the gap is appearing in IE7 lol

**saltedm8** · 22 May 2009 @ 13.42

missing something ?... html and css perhaps ? pmsl

**Michael** · 22 May 2009 @ 16.48

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lee's Lacquers Home</title>
<style type="text/css">
<!--

body {margin:0;padding:0;}
img {border:none;}
#wrapper { margin: 0 auto; width:100%; }
#wrapper img { margin-left:230px; }

#headerleft {
    position:absolute;
    background: url(navleft.gif) no-repeat;
    width:216px;
    height:231px;

}

#headermid {  
    width:100%;
    height:159px;
    background-color:#FFFFFF;
    float:left;
}
#menu {
    float:right;
    width:100%;
    height:73px;
    background-color:#000000;
    background:url(nav.gif) repeat-x;

}

#navline {
       float:left;
    width:100%;
    height:17px;
    background:url(navline.gif) repeat-x;
    


}

h2 {color:#FFFFFF;padding-left:30px;text-decoration:underline;font-family:Georgia, "Times New Roman", Times, serif;}

p {color:#FFFFFF;padding-left:30px;padding-right:30px;font-family:Verdana, "Times New Roman", Times, serif;}

ul {list-style:none;margin-left:200px;}

li {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:1.5em;
    float:left;
    display:inline;
    padding-left:50px;
    padding-top:5px;

}


li a:link {color:#FFFFFF;text-decoration:none;}
li a:visited {color:#FFFFFF;text-decoration:none;}
li a:hover {color:#739ceb;text-decoration:underline;}
li a:active {color:#739ceb;text-decoration:underline;}

#bodyback {

    width:100%;
    height:820px;
    background: url(bodyback.gif) repeat-x;
    background-color:#585858;

}

#contentleft {
     float:left;
    width:500px;
    margin-left:20px;
    margin-top:30px;
    border:#706f6f 1px solid;
    margin-bottom:10px;
    
}

#contentright {
     float:left;
    width:420px;
    margin-left:20px;
    margin-top:30px;
    border:#706f6f 1px solid;
    
    
}

#contentright img {

margin-left:7px;
margin-right:7px;
margin-bottom:10px;
}

#footer {

width:100%;
height:41px;
background-color:#000;
border-top:#706f6f 1px solid;
}

#footer p {


font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:center;
padding-top:0;
}


p a:link {color:#FFFFFF;text-decoration:underline;}
p a:visited {color:#FFFFFF;text-decoration:none;}
p a:hover {color:#739ceb;text-decoration:underline;}
p a:active {color:#739ceb;text-decoration:underline;}

-->
</style>
</head>

<body>
<div id="wrapper">
<div id="headermid">
<div id="headerleft"></div>
<img src="logo.gif" alt="Lee's Lacquers" />
</div>
<div id="menu">

<ul>
<li class="navlinks"><a href="#">Home</a></li>
<li class="navlinks"><a href="#">Services</a></li>
<li class="navlinks"><a href="#">Portfolio</a></li>
<li class="navlinks"><a href="#">Contact</a></li>
</ul>



</div>
<div id="navline"></div>
<div id="bodyback">

<div id="contentleft"><h2>Welcome to Lee's Lacquers</h2>
<p>Sed vel dui libero, in placerat tellus. Etiam tincidunt, arcu vel pulvinar ultrices, felis neque pharetra metus, eu tincidunt odio tellus quis ante. Donec vitae viverra justo. Vestibulum mauris enim, blandit in euismod a, porttitor sit amet quam. Maecenas nulla sapien, tempus cursus consectetur ac, iaculis quis sapien. Vivamus tincidunt leo sit amet odio luctus ut ultrices lorem accumsan. Cras tempus, est ac egestas scelerisque, nisi nibh consequat lectus, quis luctus libero enim in sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum lorem eget sem porta consectetur. Etiam diam lectus, consequat vel eleifend id, aliquam ut risus. </p>
<p>Pellentesque mollis justo pretium neque placerat luctus. Sed tempus ultrices augue nec imperdiet. Cras fermentum varius felis quis sodales. Aliquam nec aliquam neque. Sed ultrices lacinia tincidunt. Nulla ligula risus, pellentesque ut faucibus a, auctor at tortor. Morbi vehicula vestibulum cursus.</p>
</div>

<div id="contentright">

<h2>Work Previews</h2>
<p>The following images are a brief preview of my current work.</p>
<br />
<img src="greencar.gif" alt="Preview One" />
<img src="redcar.gif" alt="Preview Two" />
<img src="pinkcar.gif" alt="Preview Three" />
<img src="bluecar.gif" alt="Preview Four" />
<p>Don't forget to check out the rest of my portfolio, click <a href="">here</a> to contact me for a quote.
</div>
</div>
<div id="footer"><p>Copyright &copy; 2009 Michael Turner</p></div>
</div>
</body>
</html>

The gap only happens in IE, plus the page looks a total

in it too

The links in the navigation arent aligning for me the same as they do in FF and also the page's length is rediculously long in IE too, more than likely caused by myself

**A800** · 22 May 2009 @ 16.59

Change your contentright div to this:

Code:

#contentright {
     float:left;
    width:420px;
    margin-left:0px;
    margin-top:30px;
    border:#706f6f 1px solid;
   border-right:#706f6f 0px solid;
   }

The gap dissapears in FF, as well as IE.