Why are only certain divs overlapping each other? - css

Question

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.
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.
I feel like the code is pretty neat but I'm obviously missing something fairly obvious. Any help would be greatly appreciated!
I've included the HTML and CSS of the page for your review.
HTML:
<div class="container">
<div class="header">
<div style="float:left">
<img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
</div>
<div style="float: right;">
<h2>Company slogan.™</h2>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak">
</div>
<div class="subHeader">
<div style="float: left; width: 400px; text-align: left;">
</div>
<div class="form" style="float: right; width: 300px;">
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username' >School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50" /></br></br>
</div>
<div style="clear: both;">
<div>
<label style="float: left;" for='password' >Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50" />
</div>
<div style="clear: both;"></div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Forgot your password?</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Want to register?</p>
<div>
<input type='submit' name='Submit' value='Log In' style="float: right;"/>
</div>
</form>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak" style="top: 400px;">
</div>
CSS:
.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;
}

Answer 1

Don't know if this will solve the issue however it is too large for a comment...
Your HTML is malformed, you are missing a few closing tags. This could be a copy error for the last tag, however the first looks to be genuine.
See code below (I have commented where the corrections are needed):
<div class="container">
<div class="header">
<div style="float:left">
<img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
</div>
<div style="float: right;">
<h2>Company slogan.™</h2>
</div>
<div style="clear: both;">
</div>
</div>
<div class="pageBreak">
</div>
<div class="subHeader">
<div style="float: left; width: 400px; text-align: left;">
</div>
<div class="form" style="float: right; width: 300px;">
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username'>School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50"/></br></br>
</div>
<div style="clear: both;">
<div>
<label style="float: left;" for='password'>Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50"/>
</div>
<div style="clear: both;">
</div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">
Forgot your password?
</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">
Want to register?
</p>
<div>
<input type='submit' name='Submit' value='Log In' style="float: right;"/>
</div>
</div> <!-- HERE -->
</form>
</div>
<div style="clear: both;">
</div>
</div>
<div class="pageBreak" style="top: 400px;">
</div>
</div> <!-- HERE -->

Answer 2

You have line-height: 8px in your code. increase the line-height of the paragraphs and decrease your divisions widths and omit some float properties.
see jsfiddle

Answer 3

Below markup will solve issues in you layout.
<!-- CONTAINER -->
<div class="container">
<!-- HEADER -->
<div class="header">
<div style="float:left"><img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px"></div>
<div style="float: right;"><h2>Company slogan.™</h2></div>
<div style="clear: both;"> </div>
</div>
<!-- / HEADER -->
<!-- 1ST PAGE BREAK -->
<div class="pageBreak"> </div>
<!-- / 1ST PAGE BREAK -->
<!-- SUBHEADER -->
<div class="subHeader">
<div class="form" style="float: right; width: 300px;">
<!-- FORM -->
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username' >School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50" /></br></br>
</div>
<div style="clear: both;"> </div>
<div>
<label style="float: left;" for='password' >Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50" />
</div>
<div style="clear: both;"> </div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Forgot your password?</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Want to register?</p>
<div><input type='submit' name='Submit' value='Log In' style="float: right;"/></div>
</form>
<!-- /FORM -->
</div>
<div style="clear: both;"> </div>
</div>
<!-- / SUBHEADER -->
<!-- 2ND PAGE BREAK -->
<div class="pageBreak"> </div>
<!-- / 2ND PAGE BREAK -->
</div>
<!-- / CONTAINER -->