Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning layers inside layers, wrapper doesn't wrap around the other contained layers
    primarykey
    data
    text
    <p>Dear community members,</p> <p>I am actually a bit new to CSS, however I know my way around after a two weeks of studying. However at the moment I have a small problem with layers (div-tags) that I can't seem to fix. The problem is as follow, I have created the following to demonstrate my problem.</p> <pre><code>&lt;body style="margin: 0;"&gt; &lt;div style="margin: 0px auto; width: 960px;" id="main"&gt; &lt;div style="clear: both; float: left; width: 100%; height: 100px;" id="one"&gt; Hello World &lt;/div&gt; &lt;div style="clear: both; float: left; width: 100%; height: 200px;" id="two"&gt; Hello next World! &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>The problem here is, if you "look at the borders" (I have removed; background-color and border property to increase the readability of the code), you will notice that the first main div doesn't wrap around div one and two. If I want to fix it, I only have to add some contents to the main layer. resulting in the following code:</p> <pre><code>&lt;body style="margin: 0;"&gt; &lt;div style="margin: 0px auto; width: 960px;" id="main"&gt; &lt;div style="clear: both; float: left; width: 100%; height: 100px;" id="one"&gt; Hello World &lt;/div&gt; &lt;div style="clear: both; float: left; width: 100%; height: 200px;" id="two"&gt; Hello next World! &lt;/div&gt; LET ME SOLVE IT! &lt;/div&gt; &lt;/body&gt; </code></pre> <p>The question now is, how do I get the last result without adding "just contents" to my main layer?</p> <p>Thank you very much for reading my question and answering it!</p> <p>For images please see: <a href="http://www4.picturepush.com/photo/a/7808622/img/7808622.png" rel="nofollow">http://www4.picturepush.com/photo/a/7808622/img/7808622.png</a> and <a href="http://www3.picturepush.com/photo/a/7808636/img/7808636.png" rel="nofollow">http://www3.picturepush.com/photo/a/7808636/img/7808636.png</a></p> <p>(NOTE: all are direct links ;))</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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