Child div 1 pixel away from being flush with left of parent - css

Question

I have a parent div with a child div inside it (the child div acts as a pop up menu). When the child div pops out it has a tiny space so that it's not lined up with the left of the parent div.
here's the styles:
.ButtonContent
{
display:none;
border: solid 1px black;
width:275px;
position:absolute;
left:0;
margin:0px;
padding:0px;
float:left;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
margin:0px;
padding:0px;
border: solid 1px black;
border-radius:4px 4px 4px 4px;
width:276px;
text-align:center;
position:relative;
}
Here's the HTML:
<div class="Button" id="Button1" >
Add <br />
<div class="ButtonContent" id="ButtonContent1">
Date purchased:
<div class="Date" id="datePurchased1"></div><br/>
Purchase Location:<br />
<input type="text" maxlength="150" /><br />
<a>Add</a>
</div>
</div>

Answer 1

Since you have an absolutely positioned element inside a relatively positioned one with a border, left:0 positions it within the border which makes it look off by a pixel.
Quick fix: make them both the same width and use left:-1px; instead.
http://jsfiddle.net/RtGfc/
It looks to me like you don't need all this CSS to achieve the look you want, maybe a better fix (without touching your HTML):
.ButtonContent
{
border-top: solid 1px black;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
border: solid 1px black;
border-radius:4px;
width:275px;
text-align:center;
}​
http://jsfiddle.net/RtGfc/1/

Answer 2

It's two things: the 1px border from the outside <div> and the fact that you chose to put one <div> inside the other.
The 1px border is positioned outside the leftmost mark of left: 0px;. If you remove the border, it works.
Demo: http://jsfiddle.net/MmwYv/
You want .ButtonContent, which is the inner <div>, to be displayed outside .Button, which is the outer <div>. That is going to cause problems, because the inner one is going to be restricted by the measurements of the outer one. If you take .ButtonContent outside, it works too.
Demo: http://jsfiddle.net/NxCp4/