To deal with the collapsing parent when using float, I used overflow:auto. In Firefox it worked fine but in IE it had a scroll bar… Why does this scrollbar appear in IE? As far as I know the box model has the border and the padding so it must be smaller in size. What is the reason the scrollbar appears?
//Html
<!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>RamblingSoul</title>
<link rel="stylesheet" href="Rambling.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="hleft">
<h2>RamblingSoul</h2>
<p>A Free CSS Template from<br />RamblingSoul</p>
</div>
<div id="hmiddle">
<p id="hmiddle_lg1">Great Design</p>
<p class="bold" id="hmiddle_lg2">Guaranteed</p>
</div>
<div id="hright">
<p id="hright_txt1">Client Testimonial</p>
<div id="hright_txt">
Lorem ipsum dolor sit amet, consecteur adipiscing<br />
elit. Cras tristique, felis ut vehicula laoreet, nunc<br />
dolor bibendum tortor, a faicibus eros tortor sed<br />
nunc, Aliquam eget arcu.Nam sem justo, vulputate<br />
eget, cursus id, volutat ullamcorper, felis. In eget<br />
velit ut diam ultrices ultrices.<a href="">Read More</a><ul><li></li></ul>
</div>
</div>
</div>
<div id="content">
<div id="cmenu">
<ul id="menu1">
<li class="yellow"><a href="" class="upper">HOME</a></li>
<li class="red"><a href="" class="upper">ABOUT</a></li>
<li class="pink"><a href="" class="upper">PRODUCTS</a></li>
<li class="blue"><a href="" class="upper">services</a></li>
<li class="green"><a href="" class="upper">news</a></li>
<li class="pblue"><a href="" class="upper">contact</a></li>
<li class="bblue"><a href="" class="upper">nogo</a></li>
</ul>
<ul id="menu2">
<li class="pgreen1">Lorem</li>
<li class="pyellow">Dolor Sit Amet</li>
<li class="pgreen2">Consectetur Adipiscing</li>
<li class="pyellow2">Cras tristique</li>
</ul>
</div>
<div id="main">
<div id="contents">
<div id="services" >
<div id="Serv" class="banner-red bold">our services</div>
<div id="Serv1">
<img src="images/images/serv1.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read More</a></p>
</div>
<div id="Serv2">
<img src="images/images/serv2.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/greenbullet.jpg" alt="Read More">Read More</a></p>
</div>
<div id="Serv3">
<img src="images/images/serv3.jpg" alt="Service one" />
<p>
Lorem ipsum dolor sit amet, consecteur adipiscing elit. Cras<br />
tristique, felis ut vehicula laoreet, nunc dolor bibendum tortor, a<br />
faucibus eros tortor sed nunc. Aliquam eget arcu. Nam sem<br />
justo, vulputate eget, cursus id, volutat ullamcorper,felis.<br>
<a href=""><img src="images/images/orangebullet.jpg" alt="Read More">Read More</a></p>
</div>
</div>
<div id="Contents">
<div id="content1" class="banner-red bold">Some contents</div>
<div id="content2">
<p >Service title<br /><br /></p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
<div id="content3">
<p >Service title</p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
<div id="content4">
<p>Service title</p>
<p>
Aliquam congue,elit<br />
vitae feugiat pretium,<br />
elit diam
</p>
</div>
</div>
</div>
</div>
</div>
<div id="footers">
<p>ramblingsoul.com @ All Rights Reserved</p>
<p>Template provided to Webucator for use in its CSS courseware</p>
<p><span class="underline">css template</span> by ramblingsoul</p>
</div>
</div>
</body>
</html>
.//CSS
@charset "utf-8";
/* CSS Reset */
body{width:100%;}
*{padding:0px;margin:0px}
ul,li{list-style:none}
#wrapper{background-color:#CF0;width:955px;margin:0 auto;overflow:auto}
/* Css for header */
#header{width:954px;float:left;clear:both;border:#000 dashed thin}
Try overflow: hidden; instead.