Databases
StackOverflow2013
Postsdbo
POWhy are only certain divs overlapping each other?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are only certain divs overlapping each other?
    text
    copied!<p>I'm having an issue where only certain divisions are overlapping each other vertically. My second gray "pageBreak" is mounting atop my "subHeader" regardless of padding fixes and trying to staying on top of clearing floats.</p> <p>I've tried overflow, clearfix, old-school "clear: both;", and I'm still having the same problem. (I assume it's a float-related issue.) I even tried (as you can see in the code) using relative and absolute positioning to get my second "pageBreak" below my "subHeader" as it should be but no positioning value even moves the second "pageBreak." I also have my other divs below these referenced sneaking up to the top of my "subHeader." I rather not use these fixes as I want the CSS to be as dynamic as possible for obvious reasons.</p> <p>I feel like the code is pretty neat but I'm obviously missing something fairly obvious. Any help would be greatly appreciated!</p> <p>I've included the HTML and CSS of the page for your review.</p> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="header"&gt; &lt;div style="float:left"&gt; &lt;img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px"&gt; &lt;/div&gt; &lt;div style="float: right;"&gt; &lt;h2&gt;Company slogan.&amp;#0153;&lt;/h2&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="pageBreak"&gt; &lt;/div&gt; &lt;div class="subHeader"&gt; &lt;div style="float: left; width: 400px; text-align: left;"&gt; &lt;/div&gt; &lt;div class="form" style="float: right; width: 300px;"&gt; &lt;form id='login' action='login.php' method='post' accept-charset='UTF-8'&gt; &lt;input type='hidden' name='submitted' id='submitted' value='1'/&gt; &lt;div&gt; &lt;label style="float: left;" for='username' &gt;School Email&lt;/label&gt; &lt;input style="float: right;" type='text' name='username' id='username' maxlength="50" /&gt;&lt;/br&gt;&lt;/br&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt; &lt;div&gt; &lt;label style="float: left;" for='password' &gt;Password&lt;/label&gt; &lt;input style="float: right;" type='password' name='password' id='password' maxlength="50" /&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;p style="font-size: 70%; text-align: right; line-height: 8px;"&gt;&lt;a href="app-test/forgot-password.php"&gt;Forgot your password?&lt;/a&gt;&lt;/p&gt; &lt;p style="font-size: 70%; text-align: right; line-height: 8px;"&gt;&lt;a href="register.php"&gt;Want to register?&lt;/a&gt;&lt;/p&gt; &lt;div&gt; &lt;input type='submit' name='Submit' value='Log In' style="float: right;"/&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="pageBreak" style="top: 400px;"&gt; &lt;/div&gt; </code></pre> <p></p> <p>CSS:</p> <pre><code>.container { width: 1000px; margin-left: auto; margin-right: auto; border-radius: 15px; background-color: white; box-shadow: 10px 10px 40px #888; } .pageBreak { margin-left: auto; margin-right: auto; width: 900px; border-top: rgb(238,238,238) 3px solid; } .header { padding-top: 30px; padding-bottom: 30px; padding-left: 50px; padding-right: 50px; } .subHeader { padding-top: 30px; padding-bottom: 30px; padding-left: 50px; padding-right: 50px; } </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