Organizing Div's, css box model

Question

So I'm putting a few boxes in my footer and right off the bat when I use margins to move them around they are moving the whole footer around as well. Anyone know what I am doing wrong?

The site: http://cowgirlsbaking.com/

---php---

<?php wp_footer() ?>
<div id="pinkpoint">
</div>
<div id="footnav">

<div id="footernavlinks>
</div>




</div>
</body>
</html>

---The css for the two divs---

#footernavlinks {
    clear: both;
    margin:10px 0 0 25px;
    width: 300px;
    height: 250px;
    background-image:url('http://cowgirlsbaking.com/wp-content/themes/autumn-leaves/images/footblockback.png');


}

#footnav {
    background-color: #EB7CDB;
    height: 500px;
    width: 100%;
}

Answer 1

You should close the quotation marks in your footernavlinks div:

<div id="footernavlinks">
</div>

Answer 2

The margin-top of 10px on #footernavlinks is moving away #pinkpoint from the footer. You can see it with Firebug when hovering #footernavlinks
You could remove this margin-top or use a padding-top of 10px on the same element if you want to move it downwards without moving the whole footer.

What is the actual content of this footer? (text, links, images)

Answer 3

Listen self, you run into this problem all the time and you should probably figure out the clean way to do it someday but you have a lot on your plate right now what with the cats being sick and your girlfriend hanging off your arm all the time when your trying to work and the sinking feeling that you might not be able to pay those medical bills anytime soon so just use this sloppy work around and get on with your life. Tonight I will put beer in you and everything will be ok.

#footnav {
    background-color: #EB7CDB;
    height: 500px;
    width: 100%;
    padding: 50px 0 0 0;
}

#footernavlinks {
    clear: both;
    margin:50px 0 0 25px;
    width: 300px;
    height: 250px;
    background-image:url('http://cowgirlsbaking.com/wp-content/themes/autumn-leaves/images/footblockback.png');

}