Hi,
I am trying to place two buttons underneath a grid I have created but they seem to overlap with the footer and I am not sure why.
Would appreciate it if someone could have a look at the html and relevant css and talk me through what is the best solution to have more control over their placement.
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
<div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
<div id="mainNav">
<ul>
<li><a href="index.htm">about us</a></li>
<li><a href="Product.htm">products</a></li>
<li><a href="order.htm">custom order</a></li>
<li><a href="contact.htm">contact us</a></li>
<li><a href="recipe.htm">recipes</a></li>
</ul>
</div>
<img src="_images/header_bg.jpg" width="960" height="115" alt="header" /><img src="_images/indentifier.jpg" width="960" height="65" /></div>
<!--<div id="mainContent">-->
<div id="customOrder">
<h1>Custom Order</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
</div>
<div id="grid">
<div class="box">
</div>
<div class="box alternate_color">
</div>
<div class="box">
</div>
<div class="box alternate_color">
</div>
<div class="alternate_color box">
</div>
<div class="box">
</div>
<div class="alternate_color box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box alternate_color">
</div>
<div class="box">
</div>
<div class="box alternate_color">
</div>
<div class="alternate_color box">
</div>
<div class="box"></div>
<div class="alternate_color box">
</div>
<div class="box">
</div>
<form action="" method="post" name="frmCartButtons" id="frmCartButtons">
<input type="submit" name="saveButton" id="saveButton" value="Save for Later" />
<input type="submit" name="addButton" id="addButton" value="Add to Cart" />
</form>
</div>
<div id="footer">
<div id="footerLeft">
<p>© 2010 Bliss No.5 Chocolate<br/>
info@Bliss5.com<br/>
505-155-1234<br/>
</p></div>
<div id="footerMenu">
<a href="">about us</a> | <a href="">products</a> | <a href="">custom orders</a> | <a href="">contact us</a> | <a href="">recipes</a>
</div>
</div>
</div>
</body>
</html>
#grid{
background: #ffffff;
border: 1px solid #600;
float: right;
height: 520px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
width: 520px;
}
#frmCartButtons {
margin-top: 20px;
height: 30px;
width: 300px;
margin-bottom: 20px;
float: right;
}
