Hello web developers!

I am new to html and css and I have a problem that have been boggling my mind. I hope you guys can help me with this
and perhaps point me at the right direction.

I have been taught to place all my header, footer, divs, images, text etc. in a div called "wrapper".
Example:
HTML Code:
<div id="wrapper">
	<header>
		HEADER
	</header>
	<div id="box1">
		BOX 1
	</div>
	<div id="box2">
		BOX 2
	</div>
	<div id="box3">
		BOX 3
	</div>
	<footer>
		FOOTER
	</footer>
</div>
In order to layout my web page, I need to float box1, box2 and box3. The problem is, when I float all the 3 boxes, the footer will immediately touch my header.

I have been taught to use "overflow:hidden;" on the css for the "wrapper" div, but the footer is still touching.

The ONLY way I can fix this, is to separate my "header" and "footer" divs outside my "wrapper"... but is that considered best practice? I have seen alot of websites having all their divs in a "wrapper" div successfully.

Can anybody explain to me this problem? :/ Below is the CSS I used.

HTML Code:
#wrapper{
width:900px;
background-color:red;
margin:auto;
overflow:hidden;
}

header{
width:900px;
height:300px;
background-color:green;
}

#box1{
width:200px;
height:200px;
background-color:yellow;
float:left;
}

#box2{
width:200px;
height:200px;
background-color:white;
float:left;
}

#box3{
width:200px;
height:200px;
background-color:pink;
float:left;
}

footer{
width:900px;
height:100px;
background-color:black;
}
Another thing, is it okay to have an embedded AND an external css stylesheet when buidling web pages? I prefer to do that. I like to keep the layout
style for each page embedded in the "head" of my web page since the layout are different from each page. And the rest of the styles which affect all the webpages in an external stylesheet. Is that considered best practice or should I dump everything in an external stylesheet?

Thanks in advance for any input you guys.