2つのdivの間に余白があるのはなぜですか？

Question

Picture of the white space between "header" and "content"

私はちょうどウェブワークに戻り、これを理解できません！ Theresは、ヘッダーdivとサイドバーdivには存在しないコンテンツdivとの間に大きなギャップがあります。コードはそれぞれのものとあまり変わらないので、なぜ私を混乱させるのでしょうか。空白がどこから来ているのか分かりません。

私はコードと関係のないものをいくつか取りましたが、そこにはないものがあるかどうか教えてください。

それは .sidebartitleがフローティングされていないので、 .contenttitleはそれの右のフロートが、それ以下に留まるないという事実に起因しています

<!-- Page Wrap --> 
<div class="pagewrap"> 
<!-- Header --> 
<div class="header"> 
<img src="images/Logo.jpg" width="530" height="180" alt=""/> 
</div> 
<!-- Header end --> 

<!-- Sidebar --> 
<div class="sidebartitle"> 
<center style="color: #FFFFFF">Specials</center> 
</div> 
<div class="sidebar"> 
<center> 
<div class="page-popper"> 

      </div> 
<table width="187" height="196" border="0" align="center"> 
    <tbody> 
     <tr> 
     <td><div class="buttonImageWrapper"> 
<img src="images/M-2.jpg" alt=""/> 
</div></td> 
     <td> 
     <a href="/appointment.html">Request an Appointment</a></td> 
     </tr> 
     <tr> 
     <td><div class="buttonImageWrapper"> 
     <img src="images/M-2.jpg" alt=""/> 
     </div></td> 
     <td><a href="/pdf/Salon-Menu.pdf">Salon Menu</a></td> 
     </tr> 
     <tr> 
     <td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td> 
     <td><a href="/pdf/Spa-Menu.pdf">Spa Menu</a></td> 
     </tr> 
     <tr> 
     <td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td> 
     <td><a href="/bridal-services.html">Bridal Services</a></td> 
     </tr> 
     <tr> 
     <td><div class="facebookImageWrapper"><img src="images/facebook-logo.png" width="48" height="48"></div></td> 
     <td><a href="">Like us on Facebook</a></td> 
     </tr> 
     </tbody> 
    </table> 
    </center> 
</div> 
<!-- Sidebar end --> 

<!-- Content --> 
<div class="contenttitle"> 
<center style="color: #FFFFFF">Welcome</center> 
</div> 
<div class="content"> 
    <!-- Picture Slider --> 
    <table width="350" border="0" cellpadding="2" cellspacing="2"> 
      <tr> 
       <td align="left" valign="top"><div id="p7IRM_1" class="p7IRM01"> 
       <div id="p7IRMow_1" class="p7IRMowrapper"> 
        <div id="p7IRMw_1" class="p7IRMwrapper"> 
        <div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" title=""><img class="p7IRMimage" src="../images/new/slide-show1/000.jpg" alt="000" name="p7IRMim_1" width="350" height="233" id="p7IRMim_1" /></a></div> 
        <div id="p7IRMdsw_1" class="p7IRMdesc_wrapper"> 
         <div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div> 
         <div id="p7IRMds_1" class="p7IRMdesc">&nbsp;</div> 
        </div> 
        <div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper"> 
         <div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div> 
        </div> 
        </div> 
       </div> 
       <ul id="p7IRMlist_1" class="p7IRMlist"> 
        <li><a href="../images/new/slide-show1/000.jpg">000</a></li> 
        <li><a href="../images/new/slide-show1/001.jpg">001</a></li> 
        <li><a href="../images/new/slide-show1/002.jpg">002</a></li> 
        <li><a href="../images/new/slide-show1/003.jpg">003</a></li> 
        <li><a href="../images/new/slide-show1/004.jpg">004</a></li> 
        <li><a href="../images/new/slide-show1/005.jpg">005</a></li> 
        <li><a href="../images/new/slide-show1/006.jpg">006</a></li> 
        <li><a href="../images/new/slide-show1/007.jpg">007</a></li> 
       </ul> 
       <!--[if IE 5.000]> 
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style> 
<![endif]--> 
       <!--[if lte IE 6]> 
<style>.p7IRMpaginator a {width: auto !important;}</style> 
<![endif]--> 
       <!--[if lte IE 7]> 
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style> 
<![endif]--> 
       <script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,3000,4000,1,0,1,0,1500,0,0);</script> 
       </div></td> 
      </tr> 
      </table> 
    <!-- Picture Slider end --> 
    <p><strong></strong><br /> 
     <br /> 
<br /> 
     </p> 
     <p><a href="salon-services.html">Salon Services</a> | <a href="spa-services.html">Spa Services</a> | <a href="spa-packages.html">Spa Packages</a> | <a href="bridal-services.html">Bridal Services</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a></p> 
    </div> 
    <!-- Content end --> 

とCSS

.pagewrap { 
width: 1000px; 
margin: 0 auto; 
} 

.header { 
background-color: black; 
margin-bottom: 5px; 
} 

.header img { 
width: 55%; 
} 

.sidebar { 
     width: 200px; 
     height: auto; 
     font-size: 16px; 
     float: left; 
     margin-bottom: 5px; 
       padding: 10px; 

border: #000000 solid 2px; 
border-bottom-left-radius: 2em; 
border-bottom-right-radius: 2em; 
} 

.sidebartitle { 
border: #000000 solid 2px; 
border-top-left-radius: 2em; 
border-top-right-radius: 2em; 
     padding: 10px; 

height: auto; 
width: 200px; 

background-color: #68316B; 
} 

.content { 
     width: 600px; 
     height: auto; 
     font-size: 16px; 
      float: right; 
      margin-bottom: 5px; 
      padding: 10px;  
border: #000000 solid 2px; 
border-bottom-left-radius: 2em; 
border-bottom-right-radius: 2em; 
} 

.contenttitle { 
border: #000000 solid 2px; 
border-top-left-radius: 2em; 
border-top-right-radius: 2em; 
      float: right; 
        padding: 10px; 

font-size: 16px; 
width: 600px; 
height: auto; 

background-color: #68316B; 
} 

Answer 1

。しかし、.sidebartitleを浮動させる場合、.sidebarは.sidebartitleの右になるので、サイドバーとサイドバーの周りにラッパーDIVを入れて、をfloat:left;にしてください。

は、ここに結果を参照してください：http://codepen.io/anon/pen/jqdNzy