See the 'Recently Added Companies' heading here:
http://bit.ly/aJb439

It is budged right up against the bottom of the form above it, even though it is supposed to have a top-margin of 25px.

If I apply a bottom margin to the form then that works, but for some reason the H6 just ignores it!

Does anybody know why this might be?

Thanks.

CSS:

/* general //////////////////////////////////////////////////////////////////////////*/

* {
    margin: 0;
    padding: 0;
    outline: 0;
    border: none;
}

html {
    background: #d7ecf6 url('../image/html.jpg') no-repeat center 0;
}

body {
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    color: #616261;
    padding: 0 0 60px;
    background: url('../image/body.jpg') repeat-x 0 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 18px;
    color: #e4b523;
    margin: 25px 0 5px;
    font-weight: bold;
}

h1 {
    font-size: 25px;
    margin-top: 0;
}

p {
    margin: 10px 0 5px;
    line-height: 20px;
}

a, strong {
    color: orange;
}

a:hover {
    color: #444;
}

#logo {
    position: absolute;
    bottom: 10px;
    left: 0;
}





/* div id //////////////////////////////////////////////////////////////////////////*/

#wrapper {
    width: 950px;
    margin: 0 auto;
}

#header {
    position: relative;
    height: 100px;
    margin-bottom: 10px;
}

#hero {
    position: relative;
    overflow: auto;
    padding-right: 290px;
    height: 320px;
    background: url('../image/hero.png') no-repeat center 0;
    font-family: 'Arial Rounded MT Bold', arial, sans-serif;
    font-size: 15px;
    color: #1482b5;
}

#hero h1 {
    background: url('../image/hero-h1.png') no-repeat;
    margin-top: 25px;
    height: 32px;
}

#hero h1 span {
    display: none;
}

#hero a {
    color: #02b5ff;
}

#page {
    
}

#content {
    overflow: auto;
}

#sidebar {
    overflow: auto;
    background: gray;
    color: #FFF;
}

#footer {
    position: relative;
    border-top: #d7cb98 solid 10px;
}

#footer p {
    margin: 0 0 .25em;
}

#footer a {
    color: #FFF;
}

#footer .highlight {
    color: orange;
}

#footer .top {
    background: #ae860c url('../image/footer-top.gif') no-repeat center 100%;
    color: #FFF;
    overflow: auto;
    padding-bottom: 20px;
}

#footer .top h5, #footer .top h6 {
    color: #FFF;
}

#footer .top .divide {
    float: left;
    width: 210px;
    margin-left: 10px;
}

#footer .top .right {
    width: 250px;
    float: right;
    margin-right: 10px;
}

#footer .top .last {
    margin-right: 0;
}

#footer .top .sidebar {
    float:right;
}

#footer .btm {
    color: gray;
    min-height: 50px;
    margin-top: 10px;
    position: relative;
}

#footer .btm a {
    color: gray;
    text-decoration: none;
}

#footer .btm .left {
    position: absolute;
    top: 0;
    left: 10px;
}

#footer .btm .right {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 100px;
}

#footer .btm .right ul {
    margin: 0 0 0.25em;
}

#footer .btm .right p {
    clear: left;
    text-align: right;
}





/* div class //////////////////////////////////////////////////////////////////////////*/

.divide {
    
}




/* list //////////////////////////////////////////////////////////////////////////*/

ul {
    list-style: none;
}

#content ul li, #footer .top .right ul li, #sidebar ul li {
    line-height: 20px;
    background: url('../image/footer-ul-li.gif') no-repeat;
    padding-left: 22px;
}

#nav {
    position: absolute;
    width: 450px;
    height: 40px;
    bottom: 20px;
    right: 120px;
    background: url('../image/nav.gif') no-repeat;
}

#nav li, #nav-user li {
    display: inline;
    background: url('../image/nav-li.gif') no-repeat 100% 13px;
    float: left;
}

#nav li a, #nav-user li a {
    float: left;
    padding: 12px 10px 35px;
    background: url('../image/nav-li-a.gif') no-repeat center center;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    width: 70px;
}

#nav .last, #nav-user .last {
    background: none;
}

#nav-user {
    position: absolute;
    width: 110px;
    height: 40px;
    bottom: 20px;
    right: 0px;
    background: url('../image/nav-user.gif') no-repeat;
}

#nav-user li {
    background-image: url('../image/nav-user-li.gif');
}

#nav-user li a {
    width: 50px;
    padding: 12px 0 35px;
}

#nav-user .last a {
    margin-left: 5px;
}
    
ul .last {
    border: none !important;
}

#footer ul li {
    border: #b6dcee solid 0;
}

#footer ul li strong {
    color: gray;
}

#footer .top ul li {
    border-color: #FFF;
}

#footer .btm ul li {
    background: url(image/footer-btm-ul-a.gif) no-repeat;
}

#footer .btm ul li a {
    color: #1482b5;
}

#footer .btm .left ul li {
    border-right-width: 1px;
    margin-right: .5em;
    padding-right: .5em;
    float: left;
}

#footer .btm .right ul li {
    border-left-width: 1px;
    background-position: 0 center;
    margin-left: .5em;
    padding-left: .5em;
    float: left;
}





/* form //////////////////////////////////////////////////////////////////////////*/

form {
    width: 370px;
}

form label {
    float: left;
    width: 200px;
    text-align: right;
    margin-right: 10px;
}

form input, form textarea, form select {
    float: left;
}

.frm-btn {
    float: right;
    width: 150px;
    height: 40px;
    cursor: pointer;
}

form div {
    overflow: auto;
}

form div div {
    background: url('../image/frm-input-text.png') no-repeat 0 0;
    float: left;
}

form div div input {
    background: none;
    font-size: 18px;
    font-family: arial, helvetica, sans-serif;
    color: #616261;
    width: 270px;
    height: 30px;
    margin: 10px 10px 0 10px;
}

.frm-search input {
    float: left;
}

.frm-search .frm-btn {
    width: 80px;
    background: url('../image/frm-search-btn.png') no-repeat;
}

#hero .frm-search {
    position: absolute;
    bottom: 20px;
    left: 10px;
    width: 670px;
}

#hero .frm-search .cta-button {
    margin-left: 10px;
}

#frm-newsletter {
    width: auto;
    float: right;
    display: block;
}

#frm-newsletter div div {
    background-image: url('../image/footer-frm-input-text.gif');
    clear: both;
    margin-bottom: 10px;
}

#frm-newsletter div div input {
    width: 240px;
    font-size: 14px;
    margin: 5px 5px 0;
    height: 25px;
}

#frm-newsletter .frm-btn {
    background-image: url('../image/footer-frm-newsletter-btn.gif');
    width: 150px;
    height: 30px;
}

HTML:

<div class="right">
                    <form action="#" method="post" id="frm-newsletter">
                        <h5>Stay up to Date</h5>
                        <div>
                            <div><input type="text" value="Enter your name..." name="newsletter-name"></div>
                            <div><input type="text" value="Enter your email address..." name="newsletter-email"></div>
                            <input type="submit" value="" class="frm-btn">
                        </div>
                    </form>
                    <h6>Recently Added Companies</h6>
                    <ul>
                        <li><a href="#">Some Company Name</a></li>
                        <li><a href="#">Another Business</a></li>
                        <li><a href="#">This &amp; Co.</a></li>
                        <li><a href="#">Some Company Name</a></li>
                        <li><a href="#">Another Business</a></li>
                        <li><a href="#">This &amp; Co.</a></li>
                        <li><a href="#">Some Company Name</a></li>
                        <li><a href="#">Another Business</a></li>
                        <li><a href="#">This &amp; Co.</a></li>
                        <li><a href="#">Some Company Name</a></li>
                        <li><a href="#">Another Business</a></li>
                        <li><a href="#">This &amp; Co.</a></li>
                    </ul>
                </div>

It is somthing to do with the float:right on the form, as soon as i disabled the float:right the margin worked as intended.

You should be able to just remove the float on the form although ive only tested this in firefox.

Ahhh yes your right! Thanks

I'd tried adding clear:both to the h6 which I would have thought would have fixed any float issues... maybe not!

Your welcome

Or add float:none to the heading to put it into the same plane as the floated form.

clearing is used to return the document flow to normal after the floated plane.