Propiedad overflow

Hola a todos!!

Teniendo en cuenta que ya sé bien para qué sirve la propiedad overflow, a continuación voy a poner el código html y css, como podrán ver, en la capa <div id="header"> que sería el encabezado de la página ya que dentro de la misma está el logo, tiene la propiedad overflow, me gustaría que me dijeran para quéeeeeeee??? :eek:, no es lo mismo poner una simple capa con propiedad float: left?, esta son una de las cosas que me confunde mucho, ojala alguien pueda darme una respuesta contundente!!.

código html

<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Big Business</a></h1>
</div>
<div id="slogan">
<h2>Template design by Free CSS Templates</h2>
</div>
</div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br class="clearfix" />
</div>
<div id="splash">
<img class="pic" src="images/pic01.jpg" width="870" height="230" alt="" />
</div>
<div id="page">
<div id="content">
<div class="box">
<h2>Welcome to Big Business</h2>
<p>
This is <strong>Big Business</strong>, a free and fully standards-compliant CSS website template by <a href="http://www.freecsstemplates.org">FCT</a>. The pictures in this template are from <a href="http://pdphoto.org">PDPhoto.org</a>. This free CSS template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep all the links in the footer intact. Aside from that, have fun with it :)
</p>
</div>
<div class="box" id="content-box1">
<h3>Mauris justo</h3>
<ul class="section-list">
<li class="first">
<img class="pic alignleft" src="images/pic02.jpg" width="70" height="70" alt="" />
<span>Condimentum et porttitor tristique nec aliquet magnis pretium quam nibh.</span>
</li>
<li>
<img class="pic alignleft" src="images/pic02.jpg" width="70" height="70" alt="" />
<span>Posuere elementum sapien justo tortor nulla fringilla suspendisse nascetur.</span>
</li>
<li class="last">
<img class="pic alignleft" src="images/pic02.jpg" width="70" height="70" alt="" />
<span>Ipsum quis vestibulum feugiat congue nunc laoreet volutpat lorem ipsum sociis.</span>
</li>
</ul>
</div>
<div class="box" id="content-box2">
<h3>Magnis hendrerit erat</h3>
<p>
Neque neque ornare penatibus tristique fusce turpis. Purus sagittis euismod at ornare suscipit tempus.
</p>
<ul class="list">
<li class="first"><a href="#">Ipsum phasellus ullamcorper</a></li>
<li><a href="#">Mollis mattis tempus amet</a></li>
<li><a href="#">Ipsum aliquet dignissim vitae</a></li>
<li><a href="#">Orci metus curae sed mollis</a></li>
<li class="last"><a href="#">Tristique amet venenatis</a></li>
</ul>
</div>
<br class="clearfix" />
</div>
<div id="sidebar">
<div class="box">
<h3>Cursus magnis</h3>
<ul class="list">
<li class="first"><a href="#">Adipiscing tincidunt</a></li>
<li><a href="#">Euismod elit sollicitudin</a></li>
<li><a href="#">Dolor magnis et lacinia</a></li>
<li><a href="#">Mauris ornare aenean</a></li>
<li class="last"><a href="#">Ante semper fringilla</a></li>
</ul>
</div>
<div class="box">
<h3>Morbi at varius</h3>
<div class="date-list">
<ul class="list date-list">
<li class="first"><span class="date">2/08</span> <a href="#">Quam sed tempus</a></li>
<li><span class="date">2/05</span> <a href="#">Lorem et vestibulum</a></li>
<li><span class="date">2/01</span> <a href="#">Risus aenean tellus</a></li>
<li class="last"><span class="date">1/31</span> <a href="#">Tristique et primis</a></li>
</ul>
</div>
</div>
</div>
<br class="clearfix" />
</div>
<div id="page-bottom">
<div id="page-bottom-content">
<h3>Magnis hendrerit erat</h3>
<p>
Euismod sodales sociis hendrerit pulvinar molestie urna. Consectetur egestas sodales at ornare laoreet turpis. Lorem id sapien ridiculus sagittis imperdiet urna suspendisse. Posuere arcu parturient quam risus. Aliquam nullam magnis integer gravida vulputate felis. Consectetur montes sollicitudin dictum. Auctor sociis hendrerit pulvinar molestie urna lorem ipsum dolor vivamus pulvinar libero. Massa egestas cubilia lacus augue mattis consectetur.
</p>
</div>
<div id="page-bottom-sidebar">
<h3>Sed interdum</h3>
<ul class="list">
<li class="first"><a href="#">Suspendisse ultricies</a></li>
<li><a href="#">Tortor mollis enim</a></li>
<li class="last"><a href="#">Lorem enim tempor</a></li>
</ul>
</div>
<br class="clearfix" />
</div>
</div>
<div id="footer">
Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a>.
</div>

código css

* {
margin: 0;
padding: 0;
}

a {
text-decoration: underline;
color: #0F8C8C;
}

a:hover {
text-decoration: none;
}

body {
font-size: 11.5pt;
color: #5C5B5B;
line-height: 1.75em;
background: #E0DCDC url(images/img01.gif) repeat-x top left;
}

body,input {
font-family: Georgia, serif;
}

strong {
color: #2C2B2B;
}

br.clearfix {
clear: both;
}

h1,h2,h3,h4 {
font-weight: normal;
letter-spacing: -1px;
}

h2 {
font-size: 2.25em;
}

h2,h3,h4 {
color: #2C2B2B;
margin-bottom: 1em;
}

h3 {
font-size: 1.75em;
}

h4 {
font-size: 1.5em;
}

img.alignleft {
margin: 5px 20px 20px 0;
float: left;
}

img.aligntop {
margin: 5px 0 20px 0;
}

img.pic {
padding: 5px;
border: solid 1px #D4D4D4;
}

p {
margin-bottom: 1.5em;
}

ul {
margin-bottom: 1.5em;
}

ul h4 {
margin-bottom: 0.35em;
}

.box {
overflow: hidden;
margin-bottom: 1em;
}

.date {
background: #6E6E6E;
padding: 5px 6px 5px 6px;
margin: 0 6px 0 0;
color: #FFFFFF;
font-size: 0.8em;
border-radius: 2px;
}

#content {
width: 665px;
float: left;
padding: 0;
}

#content-box1 {
width: 320px;
float: left;
}

#content-box2 {
margin: 0 0 0 345px;
width: 320px;
}

#footer {
margin: 40px 0 120px 0;
text-align: center;
color: #8C8B8B;
}

#footer a {
color: #8C8B8B;
}

#header {
height: 75px;
position: relative;
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
padding: 45px;
color: #FFFFFF;
width: 888px;
border: solid 1px #7E7E7E;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden;
}
#logo {
line-height: 160px;
height: 160px;
padding: 5px 0 0 0;
position: absolute;
top: 0;
left: 45px;
}

#logo a {
text-decoration: none;
color: #FFFFFF;
text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
font-size: 3.25em;
}

#slogan {
line-height: 160px;
height: 160px;
padding: 5px 0 0 0;
position: absolute;
right: 45px;
top: 0;
}

#slogan h2 {
color: #BEBEBE;
font-size: 1.25em;
text-shadow: 0 1px 1px #3E3E3E;
}

#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}

#menu a {
text-decoration: none;
color: #FFFFFF;
font-size: 1.25em;
letter-spacing: -1px;
}

#menu ul {
list-style: none;
}

#menu ul li {
padding: 0 20px 0 20px;
display: inline;
}

#menu ul li.first {
padding-left: 0;
}

#page {
padding: 45px 45px 15px 45px;
position: relative;
width: 890px;
margin: 0;
}

#page .section-list {
list-style: none;
padding-left: 0;
}

#page .section-list li {
clear: both;
padding: 30px 0 30px 0;
}

#page ul {
list-style: none;
}

#page ul li {
border-top: solid 1px #D4D4D4;
padding: 15px 0 15px 0;
}

#page ul li.first {
padding-top: 0;
border-top: 0;
}

#page-bottom {
position: relative;
margin: 0;
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
border: solid 1px #7E7E7E;
width: 888px;
padding: 45px 45px 0 45px;
color: #DCDCDC;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#page-bottom a {
color: #F5F5F5;
}

#page-bottom h2, #page-bottom h3, #page-bottom h4 {
color: #FFFFFF;
}

#page-bottom ul {
list-style: none;
}

#page-bottom ul li {
border-top: solid 1px #8F8F8F;
padding: 15px 0 15px 0;
}

#page-bottom ul li.first {
padding-top: 0;
border-top: 0;
}

#page-bottom-content {
width: 665px;
float: left;
}

#page-bottom-sidebar {
width: 200px;
margin: 0 0 0 690px;
}

#search input.form-submit {
margin-left: 1em;
color: #FFFFFF;
padding: 10px;
background: #2FACAC;
border: 0;
}

#search input.form-text {
border: solid 1px #8F8F8F;
padding: 10px;
}

#sidebar {
width: 200px;
padding: 0;
margin: 0 0 0 690px;
}

#splash {
margin: 0 0 0 0;
height: 250px;
position: relative;
padding: 45px 45px 10px 45px;
width: 890px;
}

#splash .pic {
padding: 9px;
}

#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}