Gaps between divs that old chestnut...have tried many fixes w/out success

HTML & CSS
1

Hi i am having problems with unwanted gaps between my divs I think they are mostly above .please note I am in the middle of building a site for a University project and have not included the complete code …got stuck with my unwanted div gaps aaarggh…Any help would be super awesome.Here is my CSS:

/* the following css for body essentially just defines the repeating background pattern as simepat.jpg located in my images folder*/
body
{background-image:url(‘images/simepat.jpg’);
padding:0;
margin:0;}

/div wrapper is essentially just there to keep everything in the middle by auto aligning the left and right margins/
div.wrapper
{width:1000px;
margin-left:auto;
margin-right:auto;
padding:0;}

/This div is responsible for keeping the Sime portrait and the navigation bar to the left of the wrapper/
div.left
{float:left;
width:250px;
padding:0;
margin:0;
border:0;}

/* div.himg is a separate div created solely to hold the Sime Portrait and ensure it is at full opacity */
div.himg
{width:250px
padding:0;
margin:0;
border:0;}

/The nav div below contains the div.navbox elements and sets the bg color and opacity for the left hand column which also adds structure to the site/
div.nav
{width:250px;
height:2000px;
background-color:#a4a4a4;
opacity:0.4;
padding:0;
margin:0;
border:0;}

/The nav divs below are simply small compartments to contain each navigation option each div will contain one navigation element/
div.navbox
{width:250px;
height:50px;
padding-left:10px;}

and here is my html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>
<head>
<meta http-equiv=“Content-type” content=“text/html;charset=UTF-8” />
<title>SidneySime-Home</title>
<link type=“text/css” rel=“stylesheet” href=“sime.css” />
</head>
<body>
<div class=“wrapper”>
<div class=“left”>
<div class=“himg”>
<p><img src=“images/sime.jpg”></p>
</div>
<div class=“nav”>
</div>
</div>
</div>
</body>
</html>

2

Hi Beefman. Welcome to the forums. :slight_smile:

Your code doesn’t really give us much to go on in terms of div gaps. A common cause of this is that elements inside the divs have default margins on them that push containers apart (due to “collapsing margins”). Elements like <p>s have default top and bottom margins, for example.

An easy (if lazy) way around this is to do a “CSS reset”. For example, put this at the top of your style sheet:


html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

That will get rid of any default margin and padding.