Databases
StackOverflow2013
Postsdbo
POWhy is the inner div trying to clear other divs?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is the inner div trying to clear other divs?
    text
    copied!<p>*<strong><em>NEW UPDATED</strong> JSFiddle <a href="http://jsfiddle.net/qKP2v/8/" rel="nofollow">http://jsfiddle.net/qKP2v/8/</a></em>*</p> <p>I have a very simple layout of two sidebars floated left and right respectively. In the middle is a <code>#maincontent</code> div that has a <code>#content</code> div within it. The reason for this is so that the main content on the page can stretch to fill the size of the browser resolution. </p> <p>The problem I have is when I want to insert divs (<code>#rectanglebox1, #rectanglebox2, #rectanglebox3</code>) that clears left and right floats within my <code>#content</code> div. But the #rectanglebox divs are trying to clear the sidebars which doesn't make any sense to me. The #rectanglebox divs are within the <code>#content</code> area which has no float applied to it. So why is the #rectanglebox div being pushed below the sidebars?</p> <p>Here is my HTML:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="maincontent"&gt; &lt;div id="aside-left"&gt; &lt;ul&gt; &lt;li&gt;Link1&lt;/li&gt; &lt;li&gt;Link2&lt;/li&gt; &lt;li&gt;Link3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="aside-right"&gt; &lt;ul&gt; &lt;li&gt;Link1&lt;/li&gt; &lt;li&gt;Link2&lt;/li&gt; &lt;li&gt;Link3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;div id="ataglance"&gt; &lt;div id="rectanglebox1"&gt;&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;&lt;/div&gt; &lt;div id="rectanglebox2"&gt;&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;&lt;/div&gt; &lt;div id="rectanglebox3"&gt;&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is my CSS:</p> <pre><code>#wrapper { width:100%; margin: 0 auto; background-color: #FFF; min-height:200px; border: 1px solid #F0F; } #aside-left { height: 400px; /* guess */ float:left; width:100px; top: 0; left: 0; border: 1px solid #9C0; } #maincontent { border: 1px solid #9C0; width:100%; } #maincontent #content{ margin:0 130px; border: 1px solid red; } #aside-right { height: 400px; /* guess */ float:right; width:100px; top: 0; right: 0; text-align: right; border: 1px solid #9C0; } #ataglance { border: 2px solid black; } #rectanglebox1 { float:left; margin-top:5px; border: 1px solid orange; width:200px; } #rectanglebox2 { float:left; margin-top:5px; border: 1px solid orange; width:250px; } #rectanglebox3 { float:left; margin-top:5px; border: 1px solid orange; width:300px; } </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