DIVs overlapping, no CSS positioning used on them

Question

The problem can be seen here

I have a few divs in the document that are positioned using CSS, however, the footer and content divs are not positioned at all, except some margins (due to the other divs being positioned using CSS).

Here is a jsfiddle with all the code. Alternatively I suppose you could use Firebug or Chrome developer tools. I can't seem to figure out why the footer isn't being pushed down like it should be in the normal flow of the document by the content divs, and instead sits behind them.

I would just use margins to push the footer down out of the way, but that's sloppy, and I'm going to be using a javascript toggle to open and close the three content sections and obviously I want the footer to react during those changes in the page.

Thanks all for your help.

html

    <div id="header">

    <div id="header_logo"><a href="index.php"><img src="images/vending_logo_alt.png" alt="" /></a></div>
    <div class="row">
        <ul>
            <div class="col-1-4"><a href="index.php">Home</a></div>
            <div class="col-1-4"><a href="products.php">Products</a></div>
            <div class="col-1-4"><a href="about.php">About</a></div>
            <div class="col-1-4"><a href="contact.php">Contact Us</a></div>
        </ul>
    </div>
    </div>

<div id="heading_pad"></div>

<div id="home_image"></div>

        <div id="lower_nav">
    <div class="row">
        <div id="combination" class="col-1-4"><a href="#">Combination</a></div>
        <div id="food" class="col-1-4"><a href="#">Food</a></div>
        <div id="snack" class="col-1-4"><a href="#">Snack</a></div>
        <div id="drink" class="col-1-4"><a href="#">Drink</a></div>
    </div>  
</div>

    <div id="content">



    </div><!-- #content -->

<div id="footer" class="row">

        <div id="footer_one" class="col-1-4">
            <div id="footer_sitemap_image"><img src="images/vending_connect_icon_alt.png" alt="" /></div>
            <div id="footer_sitemap">
                <a href="">Home</a> | <a href="">Products</a> | <a href="">About</a><br>
                <a href="">Contact Us</a> | <a href="">Combination</a><br>
                <a href="">Food</a> | <a href="">Drink</a> | <a href="">Snack</a>
            </div>
        </div><!-- #footer_one -->

        <div id="footer_two" class="col-1-2">
            <div id="footer_contact_image"><img src="images/vending_mail_icon_alt.png" alt="" /></div>
            <div id="footer_contact">
                1234 Gateway Drive<br>
                Cottontown, TN 37048<br>
                (615)xxx-xxxx | (615)xxx-xxxx<br>
                <a href="#">contact@versatilesupport.com</a>
            </div>
        </div><!-- #footer_two -->

        <div id="footer_three" class="col-1-4">
            <div id="footer_social_image"><img src="images/vending_chat_icon_alt.png" alt="" /></div>
            <div id="footer_social">
                Connect with us on <span style="font-weight:600;"><a href="#">Facebook</a></span><br>
                Follow us on <span style="font-weight:600;"><a href="#">Twitter</a></span><br>
                Link to us on <span style="font-weight:600;"><a href="#">LinkedIn</a></span>
            </div>
        </div><!-- #footer_three -->

        <div id="all_rights">&copy; 2014 Vending Company. All rights reserved. Website by Ian Stanford.</div>

</div><!-- #footer -->

Answer 1

The issue is here:

#content {
    height:1px;
}

The contents of your #content is overflowing the 1px height. Remove this and the content will flow properly.