Div Tags help!

programming web dev
1

I’m a web designer using tables (yuck, want to move on up) so i’m making a web page using div tags (help!). So far i’ve managed to put the header where it’s suppose to be but the navigation, content, and footer is acting weird. I don’t want a gap between the images of the nav bar and content. I want everything centered just like the header bar including the footer. Here is the xhtml and css. Please help.



<!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>Untitled Document</title>
<link href="surrender-css/surrender-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.jpg" width="925" height="165" alt="surrender header" /></div>
<div id="navigation"><img src="images/navigation.jpg" width="246" height="603" alt="surrender naviation"/></div>
<div id="content"><img src="images/content.jpg" width="679" height="534" /></div>
<div id="footer"><img src="images/footer.jpg" width="679" height="69" /></div>
</div>
</body>
</html>





body {
    margin: 0px;
    padding: 0px;
    
}

#header{
    width: 925px;
    height: 165px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    margin-bottom: opx;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

#navigation {
    float:left;
    width: 246px;
    height: 603px;
    
}

#content{
    float: right;
    width: 679px;
    height: 534px;
    
}

#footer{
    width:679px;
    height:69px;
    margin-right:auto;
    margin-right:auto;
}

I’m a div tag newbie former table user so much help would be appreciated Thanks!