I spent some time creating a pedigree out of div layers on this site and I got it all nicely aligned.
But when I put text in it, whether just in the div or in p tags, it moves the div layer down significantly.
It doesn't seem to add any margin or padding or anything else I can see while inspecting the element, and it doesn't seem to be affecting the grandchild div layers.
HTML:
<div id="pedigree">
<div id="parentwrap">
<div class="parent">test</div>
</div>
<div id="childwrap">
<div class="child">
<p>Am. Ch. Kenai's Aldebaran</p>
</div>
<div class="child">
<p>pAm. Ch. Santa Clara Del Viento</p>
</div>
</div>
<div id="grandchildwrap">
<div class="grandchild">Am. Can. Ch. Ryzann's Eclipse at Kenai</div>
<div class="grandchild">Am. Ch. Timber Ridge's Abi of Kenai</div>
<div class="grandchild">Am. Ch. Sky Run Gavril Virtual Zip JC</div>
<div class="grandchild">Am. Can. Ch. Tazeb's Zena</div>
</div>
</div>
CSS:
#pedigree {
position: relative;
width: 584px;
height: 204px;
margin: 0 auto;
margin-top: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted black;
}
#parentwrap {
position: relative;
display: inline-block;
margin: 0;
width:auto;
height: 205px;
}
.parent {
position: relative;
width: 190px;
height: 202px;
margin: 0px;
padding: 0px;
border: 1px solid black;
}
#childwrap {
position: relative;
display: inline-block;
margin: 0;
width: auto;
height: 205px;
}
.child {
position: relative;
width: 190px;
height: 95px;
margin: 0px;
padding: 0px;
border: 1px solid black;
margin-bottom: 10px;
}
#grandchildwrap {
position: relative;
display: inline-block;
width: auto;
height: 205px;
}
.grandchild {
position: relative;
width: 190px;
height: 46px;
margin: 0px;
padding: 0px;
border: 1px solid black;
margin-bottom: 4px;
}
.parent, .child, .grandchild {
-moz-border-radius: 35px;
border-radius: 35px;
Best Answer
Adding the text creates a baseline for the #parentwrap div, so the div gets aligned to that. Without the text, there's no baseline so the div takes a fallback layout mode.
To fix, set add
#parentwrap { vertical-align:top; }