Databases
StackOverflow2013
Postsdbo
PODIV moves when I put text in it
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODIV moves when I put text in it
    text
    copied!<p>I spent some time creating a pedigree out of div layers on <a href="http://dev4.peeknpoke.co.uk/dogs/jester.php" rel="noreferrer">this site</a> and I got it all nicely aligned.</p> <p>But when I put text in it, whether just in the div or in p tags, it moves the div layer down significantly.</p> <p>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.</p> <p><strong><a href="http://jsfiddle.net/qfjkLze3/" rel="noreferrer">JSFiddle</a></strong></p> <p>HTML: </p> <pre><code>&lt;div id="pedigree"&gt; &lt;div id="parentwrap"&gt; &lt;div class="parent"&gt;test&lt;/div&gt; &lt;/div&gt; &lt;div id="childwrap"&gt; &lt;div class="child"&gt; &lt;p&gt;Am. Ch. Kenai's Aldebaran&lt;/p&gt; &lt;/div&gt; &lt;div class="child"&gt; &lt;p&gt;pAm. Ch. Santa Clara Del Viento&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="grandchildwrap"&gt; &lt;div class="grandchild"&gt;Am. Can. Ch. Ryzann's Eclipse at Kenai&lt;/div&gt; &lt;div class="grandchild"&gt;Am. Ch. Timber Ridge's Abi of Kenai&lt;/div&gt; &lt;div class="grandchild"&gt;Am. Ch. Sky Run Gavril Virtual Zip JC&lt;/div&gt; &lt;div class="grandchild"&gt;Am. Can. Ch. Tazeb's Zena&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#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; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload