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

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/