Normally when I have this problem, its just in FF or Opera [as I heard it is the proper CSS behaviour].

But this time Im only getting it in IE. Basically, I have a div element, with 2 floated div's inside it. there is another div below the containing div.

but the floated elements dont seem to be contained within the div, so they cram right ontop of the div below it, ignoring any bottom margins or padding. Ive turned borders on to make sure of this.

I have a <br> element in there, styled to clear. This fixes the problem in FF and Opera, but the problem is still there in IE!!

I dont suppose anyone knows of any other methods I can try?

i'm not too sure what you mean. Any chance of seeing this.

Have you tried adding (display: inline to the floated divs which solves a known float issue in ie?

Ahhh the problem is still there!

Heres the code if you fancy lookin through it!

HTML:

        <div class="section">
          <h2>Graphic Design Packages</h2>
          <div class="boxholder"><span class="box_h">Album Cover Design</span>
            <div class="box">
              <p>Typically, album covers will cost between &pound;25 and &pound;50, depending on how complex the client wants the design to be.</p>
              <p class="album">Also, a back cover will add more to the price, but this may not be drastically more expensive as elements from the front cover can be used in it. </p>
            </div>
</div>
          <div class="boxholder"><span class="box_h">Myspace package </span>
              <div class="box">
                <p>For between &pound;20 and &pound;40, I can design            
                  you a background, and default image to go on your Myspace profile. I can also send you the necessary code to alter the colours of the elements on your Myspace page, without any adverts appearing on it.</p>
                <p class="myspace">The cost will depend on how you want the design to look, but I can give you an exact quote before I start work on it. </p>
            </div>
          </div>
            <br class="clear" />
        </div>
        <div class="section">
          <h2>Payment</h2>
          <p class="paypal">All of my transactions go through <a href="http://www.paypal.co.uk" target="_blank">Paypal</a> . If you don't have a Paypal account, you can sign up for one <a href="https://www.paypal.com/uk/cgi-bin/webscr?cmd=_registration-run" target="_blank">here</a>. Registration only takes a couple of mintues, you can then transfer money from your bank, and send money to any e-mail address that has a Paypal account. </p>
          <p>Don't be put off by the fact that all of my prices are in pound sterling, I can do business internationally using Paypal. </p>
          <p>&nbsp;</p>
        </div>

CSS:

/* CSS Document */

/*STYLES///////////////////////////////////////////*/
body {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:11px;
background:#FFF url(../Images/bg_line.gif) repeat-x 0 350px;color:#388396;font-weight:bold;}
a {color:#00CCCC;}
a:hover {color:#00CCCC;}
br.clear {clear:both;line-height:0;height:0;}
h1 {font-size:130%;margin-top:0;border-color:#46A1B8;border-style:solid;color:#0099CC;
border-width:0 0 1px 1px;padding:0 0 2px 2px;
background:url(../Images/h1.jpg) 100% 3px no-repeat;}
h2 {font-size:120%;color:#0099CC;margin-bottom:10px;}
p.contact {width:300px;display:inline;float:left;margin-top:5px;}
.hl {font-size:105%;color:#0099CC;}
.box_h {background-image:url(../Images/box_h.jpg);display:block;padding-left:5px;
color:#FFF;}
p.myspace {background:url(../Images/myspace.jpg) no-repeat 100% 100%;
padding:0 45px 10px 2px;}
p.album {background:url(../Images/album.jpg) no-repeat 100% 80%;
padding:0 50px 5px 2px;}
p.paypal {background:url(../Images/paypal.gif) no-repeat 100% 20%;
padding:0 120px 0 2px;width:460px;}



/*DIVS///////////////////////////////////////////*/
#container {width:720px;float:right;}
#banner {background-image:url(../Images/banner.jpg);height:253px;}
#swirl {background:url(../Images/swirl.jpg) no-repeat 0 0 ;padding-left:30px;
background-color:#FFF;}
#content {width:100%;clear:left;margin:0;}
#footer {height:25px;background-image:url(../Images/bg_bottom.jpg);clear:left;
text-align:center;padding-top:15px;}
#footer a {color:#46A1B8;text-decoration:none;}
div.left {width:300px;float:left;margin-right:10px;}
div.leftnav {width:200px;float:left;margin-right:10px;}
div.right {width:350px;float:left;}
div.rightbig {width:450px;float:left;}
div.workpic {display:inline;float:left;width:250px;}
div.views {width:100%;margin-bottom:5px;}
div.views img {margin:0 1px 1px 0;}
div.workinfo {width:200px;float:left;padding-top:5px;}
div.workinfo p {padding-left:2px;}
div.news_h {width:300px;background:#46A1B8 url(../Images/news_h.gif) no-repeat 100% 0;
color:#FFF;}
div.news_h p {margin:0;padding:1px 0 1px 12px;font-size:110%;font-weight:bold;
background:url(../Images/bullet.gif) no-repeat 0 100%;}
div.news_m {width:300px;margin-bottom:10px;}
div.news_m p {margin:2px;}
div.section {background:url(../Images/section.jpg) no-repeat 100% 0;clear:left;margin-top:5px;
padding-bottom:5px;border-top:#97D2E0 solid 1px;}
div.boxholder {width:300px;float:left;margin-right:5px;display:inline;}
div.box {border-style:solid;border-color:#97D2E0;
border-width:0 1px 1px 1px;}
div.box p {margin:2px 2px 6px 2px;}


/*TABLES///////////////////////////////////////////*/
table {border:#46A1B8 solid 1px;border-collapse:collapse;}
table tr {border-bottom:#46A1B8 solid 1px;}


/*LISTS///////////////////////////////////////////*/
#nav {background:url(../Images/nav_ul.jpg) repeat-x 0 0;padding:0;margin:0 0 20px 0;
list-style-type:none;width:100%;float:left;}
#nav li {display:inline;}
#nav a {display:block;float:left;padding:8px 25px 12px 3px;background:url(../Images/nav_a.jpg)
no-repeat 100% 0;font-weight:bold;text-decoration:none;color:#FFF;}
ul.leftnav {margin:5px 0 0 0;padding:0;list-style-type:none;}
ul.leftnav li {display:inline;}
ul.leftnav a {display:block;background:#46A1B8 url(../Images/bullet.gif) no-repeat 0 100%;
border-bottom:#fff solid 1px;padding-left:12px;text-decoration:none;}
ul.leftnav a:hover {background-color:#48B7CE;}
ul.list {margin:0 0 0 2px;padding:0;list-style-type:none;}
ul.list li {background:url(../Images/bullet2.gif) no-repeat 0 100%;padding:0 0 2px 12px;
border-bottom:#0099CC dotted 1px;}
ul.leftnav a {color:#FFF;}
ul.leftnav a:hover {color:#FFF;}



/*FORMS///////////////////////////////////////////*/
label, label.wide {text-align:right;margin-right:2px;display:block;float:left;width:4em;
padding-top:5px;}
label.wide {width:5em;}
label.wider {width:15em;}
input, select, textarea {border:#46A1B8 solid 1px;font-family:Arial, Helvetica, sans-serif;
font-weight:bold;font-size:100%;color:#46A1B8;margin:2px;}
input.submit {margin-left:5em;margin-top:5px;background:#FFF;}
form p {margin:2px;padding:0;}
form {margin-bottom:0;}
form.contact {width:300px;float:left;margin-top:3px;}
fieldset {border:#46A1B8 solid 1px;padding:2px 3px;}
legend {color:#46A1B8;}

Give div.section a height of 1% and it will wrap your boxes.

Thanks, it works!

I never would have thought of adding something like that, is it just a coincidence that something like that fixes it?

Nope.. not a coincidence, it's an IE bug:
http://www.positioniseverything.net