Databases
StackOverflow2013
Postsdbo
POCenter a div under another div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter a div under another div
    text
    copied!<p>My question is if someone could help me with positioning the "container-div" under the "settings-div". I also would like that even if someone would zoom in, that it would stay under the "settings-div".</p> <p>HTML: </p> <pre><code>&lt;body&gt; &lt;div class="menu"&gt; &lt;div class="option"&gt;Home&lt;/div&gt; &lt;div class="option"&gt;Media&lt;/div&gt; &lt;div class="option"&gt;link 3&lt;/div&gt; &lt;div class="option"&gt;link 4&lt;/div&gt; &lt;div class="option"&gt;link 5&lt;/div&gt; &lt;div class="open"&gt;&lt;/div&gt; &lt;div class="option" id="settings"&gt;Settings&lt;/div&gt; &lt;/div&gt; &lt;div id="container"&gt; &lt;div class="s-o"&gt;Account&lt;/div&gt; &lt;div class="s-o"&gt;Privacy&lt;/div&gt; &lt;div class="s-o"&gt;Logout&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>html { background-image: url("carbon_background.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cgoogleover; } body, html { height: 100%; width: 100%; padding: 0; } .menu { margin-top: 0px; height: 25px; background-color: #3B5998; margin-left: 0px; margin-right: 0px; border-radius: 0px; margin-top: 0px; width: 100%; display: block; top: 0px; left: 0px; margin-top: -8px; margin-left: -8px; } .menu .option { float: left; width: 15%; text-align: center; background-color: #3B5998; height: 25px; border-radius: 0px; color: white; font-size: 20px; text-decoration: none; list-style-type: none; } .menu .open { float: left; width: 10%; text-align: center; background-color: #3B5998; height: 25px; border-radius: 0px; text-decoration: none; list-style-type: none; } .s-o { list-style-type: none; color: white; margin-left: 85%; background-color: #BBBBFF; opacity: 0; width: 15%; margin-top: 0px; text-align: center; font-size: 20px; } </code></pre> <p><a href="http://jsfiddle.net/cLWeK/" rel="nofollow">Here is a jsFiddle of my current script</a>.</p>
 

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