Divなし100％

Question

私はStackoverflowで同様の質問を見ましたが、私は彼らの指示を試みましたが、それでも違いはありません。私はマージンを行った：0パディング：0も私のコードに。

最初のdivはサイドバー、2番目のdivはコンテンツ（青色）、右側に空白があります。右のスペースは3番目のdivではなく、ちょうど空白のようです。私は空白がそこにあることを望みません。 #contentの80％の幅がそれをめちゃくちゃにされたと思い

#dashboard { 
 
     width: 100%; 
 
    } 
 
    
 
    #content { 
 
     float: right; 
 
     width: 80%; 
 
     overflow: hidden; 
 
     background: aqua; 
 
    } 
 
    
 
    #sidebar { 
 
     font-family: "Open Sans"; 
 
     font-size: 16px; 
 
     font-style: normal; 
 
     font-variant: normal; 
 
     font-weight: bolder; 
 
     line-height: 18px; 
 
     color: #c5cdd1; 
 
     text-decoration: none; 
 
     background-color: #14253f; 
 
     width: 220px; 
 
     height: 100%; 
 
     float: left; 
 
     width: 20%; 
 
     overflow: hidden; 
 
    }

<section id="dashboard"> 
 
    <div id="sidebar"> 
 
     <!-- Logo --> 
 
     <div id="logo"><img src="img/FDMxLogo.png" /></div> 
 

 
     <!-- Nav --> 
 
     <nav id="nav"> 
 
      <a class="mob-nav"> </a> 
 
      <ul> 
 
       <li id="m-item" class="current"> 
 
        <a href="#"><img src="img/ico_home.png" />DASHBOARD</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_report.png" />REPORTS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_cust.png" />CUSTOMIZE</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_set.png" />SETTINGS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_about" />ABOUT</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_con" />CONTACT</a> 
 
       </li> 
 

 
      </ul> 
 
     </nav> 
 
    </div> 
 
    <div id="content"> 
 
     <a href="create.php" class="add">Add Graph<br></a> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <?php echo $div;?> 
 

 
      <button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button> 
 
    </div> 
 
</section>

Answer 1

：

---

は、ここに私のCSS/HTMLです。 #sidebarにも2度の幅を使用しています

Answer 2

これは簡単な編集方法です。

私は#dashboardに

display:table; 

を追加しました。 #contentと#sidebarの両方からfloatを削除しました。私はまた両方からthieの幅のパーセントを削除しましたが、幅：220pxを残しました。サイドバーにあります。

そしてIは#contentと#sidebar両方に

display:table-cell; 

を加えました。

フィドル：https://jsfiddle.net/r5jcv2yu/