Q: Two divs with near-identical CSS positions do not align This jsfiddle illustrates a problem I've run into while designing a page for myself.
I have two divs (.list and .piece) that are each in a larger containing div (.list-bkg and .piece-bkg) to create the semi-opaque background which covers the whole screen when one of the list items is clicked and the .piece div slides down. The CSS for both the .list and .piece are identical in their positioning (vertically, at least), and both of the -bkg divs have identical vertical positioning as well.
Despite this, for some reason, the top of the two inner divs do not align. I've tried playing with the float of each, as well as box-sizing (
as recommended here) in case there is some slight math issue, but nothing seems to work. Is it a simple issue of relative/absolute positioning? I'm really struggling with what's going on. All help appreciated!
here is the effected  HTML code:
<div class="list-bkg">
    <div class="list nav">
        <span>serious 1</span><br />
        <span>serious 2</span><br />
        <span>serious 3</span><br />
    </div>
</div>

<div class="piece-bkg">
    <div class="piece">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/7TEq3iyifpQ" frameborder="0" allowfullscreen></iframe>
        <br /> <br />
        important info<br/>
        helpful<br />
        cool<br />
    </div>
</div>

and the CSS:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-width: 1024px;
min-height: 768px;
}
.list-bkg {
float: left;
position: absolute;
top: 0px;
z-index: 75;
width: 36.29%;
padding-top: 10%;
height: 90%;
background-color: rgba(0, 0, 0, 0.65);
font-family: monospace;
color: white;
text-align: center;
}
.piece-bkg{
float: left;
position: absolute;
top: 0px;
z-index: 75;
width: 63.71%;
padding-top: 10%;
height: 90%;
background-color: rgba(0, 0, 0, 0.65);
font-family: monospace;
color: white;
left: 36.29%;
display: none;
}
.piece {
position: relative;
margin-top: 5.8%;
height: 74%;
left: 2%;
padding-top: 2%;
padding-right: 2%;
font-size: 18px;
background-color: rgba(211, 58, 146, 0.8);
float: left;
text-align: center;
max-width: 600px;
padding-left: 2%;
}
.list {
position: relative;
margin-top: 5.8%;
height: 74%;
left: 8.97%;
width: 82%;
padding-top: 2%;
padding-right: 2%;
font-size: 18px;
text-align: right;
background-color: rgba(211, 58, 146, 0.8);
}   


A: In yous styles both divs price and list has a margin-top:5.8%. But list-bkg has a width 36.29% and piece-bkg has width 63.71%. So the margin-top for the div price will be 5.8% of the width 63.71% and margin-top for list will be 5.8% of the width 36.39%. So margin-top values for both the divs will be different(because the paddings are based on width and height) and that is why the top of two divs doesn't align. To fix this either decrease the margin-top of .price or increase the same of .list
.price{
  margin-top:3.3%;// change this as you need
} 

OR
.list{
  margin-top:10.1%; // change this as you need
}

The other solution would be to add margin-top in pixels, then both the divs will align properly.

A: You have the margin top based on a percent, but the 2 container are different(because the padding are based on the width and height), if you put the same margin top in pixeles, the two containers would be aligns
        html, body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        min-width: 1024px;
        min-height: 768px;
    }
    .list-bkg {
        float: left;
        position: absolute;
        top: 0px;
        z-index: 75;
        width: 36.29%;
        padding-top: 10%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.65);
        font-family: monospace;
        color: white;
        text-align: center;
    }

    .piece-bkg{
        float: left;
        position: absolute;
        top: 0px;
        z-index: 75;
        width: 63.71%;
        padding-top: 10%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.65);
        font-family: monospace;
        color: white;
        left: 36.29%;
        display: none;
    }

    .piece {
        position: relative;
        margin-top: 10px;
        height: 74%;
        left: 2%;
        padding-top: 2%;
        padding-right: 2%;
        font-size: 18px;
        background-color: rgba(211, 58, 146, 0.8);
        float: left;
        text-align: center;
        max-width: 600px;
        padding-left: 2%;
    }

    .list {
        position: relative;
        margin-top: 10px;
        height: 74%;
        left: 8.97%;
        width: 82%;
        padding-top: 2%;
        padding-right: 2%;
        font-size: 18px;
        text-align: right;
        background-color: rgba(211, 58, 146, 0.8);
    }   

