Databases
StackOverflow2013
Postsdbo
POPositioning and size of a strange div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning and size of a strange div
    text
    copied!<p>I recently had a problem that seems simple enough to solve but I just can not understand.</p> <p>I was creating a style swicher and therefore I have included a list with different colors and another div colorSwicher connected to the plugin. I do not understand why, despite the div is after the list, appears as the first. And considering its size, has a width of proportion.</p> <p>How can I insert it after the other? And most of all I would like to understand why it has this effect ..</p> <p>Thanks in advance</p> <p><img src="https://i.stack.imgur.com/a4AWn.png" alt="Problem width for no reason"></p> <p>The html is</p> <pre><code>&lt;div id="option"&gt; &lt;ul&gt; &lt;li id="blue" class="color"&gt;&lt;/li&gt; &lt;li id="red"class="color"&gt;&lt;/li&gt; &lt;li id="yellow" class="color"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="colorSelector"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The css is </p> <pre><code>#colorSelector { position: relative; max-width: 36px; height: 36px; background: url(../images/select.png); } #colorSelector div { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center; } </code></pre> <p>For the ALL code : <a href="http://jsfiddle.net/zh3sL/" rel="nofollow noreferrer">http://jsfiddle.net/zh3sL/</a></p> <p>I added another div with the same id to show how its width involves the whole screen even though it is set to 36px</p> <p><img src="https://i.stack.imgur.com/p9FAC.png" alt="effect 2"></p> <p>I tried to eliminate the position, but the result is not the best <img src="https://i.stack.imgur.com/oWvSy.png" alt="Without positon"></p> <p>I hope someone can understand and can help me.</p> <p>Again, thanks in advance</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