特定の部門のみが垂直方向に重なっているという問題があります。私の2番目の灰色の「pageBreak」は、パディングの修正に関係なく、「subHeader」の上にマウントされ、クリアフロートの上に留まろうとしています。
オーバーフロー、clearfix、昔ながらの「clear：both;」を試しましたが、まだ同じ問題があります。（これはfloat関連の問題だと思います。）相対位置と絶対位置を使用して、2番目の「pageBreak」を「subHeader」の下に配置しようとしましたが、位置の値は移動しません。 2番目の「pageBreak」。また、これらの参照の下にある他のdivが、「subHeader」の先頭に忍び寄っています。明らかな理由でCSSをできるだけ動的にしたいので、これらの修正は使用しません。
コードはかなりきちんとしているように感じますが、明らかにかなり明白なものが欠けています。どんな助けでも大歓迎です！
レビュー用にページのHTMLとCSSを含めました。
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;"><a href="app-test/forgot-password.php">Forgot your password?</a></p>
<p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="register.php">Want to register?</a></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;
}