Two divs with near-identical CSS positions do not align

Question

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);
}

your child elements have their styles set as percentages of their containers, but the containers are not identically sized. There is no reason to expect the children to be identically sized. — Stephen Thomas, Mar 27 '14 at 19:12
@StephenThomas their heights are identical,so the percentage of their heights should be identical, correct? Or is it percentage by total area of the div? — qwentl, Mar 28 '14 at 01:07
`margin-top: 5.8%;` `padding-top: 2%;` are calculated based on **width** — Stephen Thomas, Mar 28 '14 at 09:52

score 1 · Accepted Answer · answered Mar 27 '14 at 19:18

1

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.

answered Mar 27 '14 at 19:18

James

4,540
1
18
34

exactly how is the margin calculated based off of the width? I'd like to be able to line them up precisely using math – qwentl Mar 29 '14 at 20:07
Yes the margins and padding are calculated based on the width of the containing block. These links might be helpful http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width , http://mattsnider.com/css-using-percent-for-margin-and-padding/ – James Mar 31 '14 at 04:13

score 0 · Answer 2 · answered Mar 27 '14 at 19:16

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);
    }

Two divs with near-identical CSS positions do not align

2 Answers2