Unwanted space between header/image and div below.. Options

[Focus1]

Hi guy's, just finished up college for the term and getting back into some HTML but I'm having an issue here and I tried a lot of margin and padding options in CSS but it's not fixing my issue.

Basically if I have either a header with a color or an image as my header right below it, there is some unwanted space. I want the header to sit flush on the next div but it's just not happening for me.

In "sample 1" I want my navmenu to sit flush from the top header to the next set of div's, to take up the whole space but instead there seems to be lots of margin or padding around my navmenu ? I'm not sure how to explain this really, so sorry if I'm putting this across wrong.

I've put 2 links to samples of my issue below and I have all fingers and toes crossed that someone can help me out here because it's drove me nuts already

As I say I'm quite new to HTML in general but I'm getting there but just can't the div's to sit flush as you can see with the image header in sample "2" and in sample "1" I'm just having a mess around with a floating layout so don't mind the messed up colours

All suggestions appreciated!

Sample 1: http://img341.imageshack.us/img341/4049/floatingq.jpg
Sample 2: http://img38.imageshack.us/img38/8817/floating1.jpg

P.s my CSS is below

body {
font: 76%/160% Tahoma, Verdana, Arial, sans-serif;
margin: 0;
text-align: center;
background-color: #EEEE00;
}

#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
border-left: 1px solid #4f4f4f;
border-right: 1px solid #4f4f4f;
background-color: #fff;
}

#header {
width: 100%;
height: 150px;
background-color: green ;
}

#navmenu li {display: inline; padding: 0px 48px 0px 48px; text-align: center; background-color: #AAAAAA ; }

navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }

#left { /*720px normal width the padding of 30px applies to the top, right, bottom and left so I'm subtracting 60px from 720px*/
width: 660px;
float: left;
background-color: #fff;
padding: 30px;
}

#right { /* 240px is the entire size, 30px to the top, 25px to the right, 30px to the bottom and 25px to the left so subtracting 55px in total- 25 is for left and right and 30 is for top and bottom*/
width: 185px;
float: left;
background-color: #ccc;
padding: 30px 25px 30px 30px;
}

#footer {
clear: both;
width: 100%;
height: 150px;
background-color: green ;
}

This post has been edited by Focus1: May 14 2012, 03:46 PM

[Focus1]

Pandy, thanks very much for this invaluable information, very much appreciated, and being honest I've learned much more of the important stuff of HTML and CSS via these forums by reading posts and getting help from you guys than I actually learned during my full term in the college, so I cant' thank you enough!

I played around with margins for well over an hour now and I still couldn't get it... I was stumpted. The image I had I downloaded from google images just for testing but it just wouldn't sit right without margin problems, it was a .png.... but I then tried a jpg that I actually created in photoshop a couple months back and it sat in nicely!!

Hopefully 1 last question on this margin/padding situation, for the time being at least; The image is sitting in fine as my header so all is well there, but when I use the exact same image as my footer there is an ever so small gap right at the bottom, I've set all the margins I can think and see of to 0 but still it remains. Below are 2 links, the top fits nicely but as you can see from the bottom there is a very small margin, can this be eliminated ?

Top: http://img37.imageshack.us/img37/3315/topxl.jpg
Bottom(problem): http://img687.imageshack.us/img687/7694/bottomcd.jpg

Thanks again!!