Databases
StackOverflow2013
Postsdbo
POCSS margin-top on inner div pushing parent div down
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS margin-top on inner div pushing parent div down
    primarykey
    data
    text
    <p>I am trying to push the child div down 5px inside of the parent div. When I put <strong>margin-top:5px;</strong> on the inner div it pushes down both the inner div and the parent div from the div above the parent div, but does not push the inner div down from the parent div. How to I set it so that only the inner div is pushed down 5px from the parent div? I do not want the parent div to push down from the div above it. Thanks for any help.</p> <p>html for Navigation:</p> <pre><code>&lt;nav&gt; &lt;div class="nav-container"&gt; &lt;div id="cat_14623_divs"&gt; &lt;ul id="nav_14623"&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;AKINA &amp;amp; RED LAKE&lt;/a&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;FRESH WILD CAUGHT FISH&lt;/a&gt; &lt;ul id="navsub_14623_2326"&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;WALLEYE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;PERCH&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;CRAPPIE&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;NORTHERN&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;WHITEFISH&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;NEWS FROM THE FISHERY&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="return false;"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt; &lt;li class="last"&gt;&lt;a href="#" onclick="return false;"&gt;FAQs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; </code></pre> <p>CSS for Navigation:</p> <pre><code>nav{ position:relative; width:960px; background-color:#660000; height:40px; } div.nav-container{ position:relative; width:100%; } #cat_14623_divs{ margin-top:5px; height:30px; background-color:#520000; width:960px; } #nav_14623{ list-style:none; display:block; padding:0; width:80%; margin:0 auto; } #nav_14623 li{ position:relative; float:left; padding: 0.5em 1.5em; margin: 0px; font-size:12px; border-right:solid 2px #fff; text-align:center; } #nav_14623 li.last{ border-right:none; padding-right:5px; } #nav_14623 li a{ color:#FFF; text-decoration:none; } #nav_14623 ul{ position: absolute; left:0; top: 100%; display: none; padding: 0 1000em; /* trick from css-tricks comments */ margin: 0 -1000em; /* trick from css-tricks comments */ list-style: none; margin-left: 0px; margin: 0; padding: 5px; width:200px; z-index: 1000; background: #660000; border-left: 1px solid #336699; border-right: 1px solid #336699; border-bottom: 1px solid #336699; border-top: none; } #nav_14623 ul li{ position: relative; float: none; border-right: none; padding:0; margin: 0; } #nav_14623 ul li a{ color: #fff; font-size: 12px; vertical-align: middle; line-height:32px; width: 100%; height:35px; display:block; } #nav_14623 ul li a:hover{ background: #520000; width: 100%; } #nav_14623 li:hover &gt; ul{ display: block; } #nav_14623:after { content: ""; clear: both; display: block; } </code></pre> <p>Here is the url in case you want to see the site: <a href="http://redlakewalleye.designangler.com/" rel="nofollow">http://redlakewalleye.designangler.com/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USPhorden
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS margin-top on inner div pushing parent div down
      1. USAndrew Briggs
      1. VTFavorite
    1. COThis is called *margin collapse*.
      singulars
      1. POCSS margin-top on inner div pushing parent div down
      1. UScimmanon
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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