私のdivは浮動していないのはなぜですか？

私は入れ子にしている<div id="sidebar">を左にfloat: left;を使って入れようとしていますが、動作しません。代わりに、ページの中央にとどまります。私のdivは浮動していないのはなぜですか？

<!DOCTYPE html> 
<html lange="en"> 

<head> 
    <meta charset="utf-8" /> 
    <title>Enhanced</title> 
    <style> 
    body { 
     background : #b3d9ff; 
     margin : 0; 
     padding: 0; 
     font-family : Futura; 
    } 
    #wrapper { 
     width: 960px; 
     height: auto; 
     background: #cce5ff; 
     border-left: 5px solid #737373; 
     border-right: 5px solid #737373; 
     overflow : auto; 
     margin : 0 auto; 
     padding: 10px; 
    } 
    #header { 
     width:100%; 
     height:100px; 
     border-bottom: 3px solid #000; 
    } 
    #logo { 
     float: left; 
     margin: 15px 0px 0px 80px; 
    } 
    #social { 
     float: right; 
     margin: 20px 30px 0px 0px; 
    } 
    #social ul li { 
     float: left; 
     list-style: none; 
     padding-right: 5px; 
    } 
    #sidebar { 
     float: left; 
     width: 275px; 
     height: 100%; 
    } 
    #menu { 
     float: left; 
     height: auto; 
     width: 200px; 
    } 
    #menu ul li { 
     list-style : none; 
     padding: 0px; 
     text-align: center; 
    } 
    #menu ul li a { 
     color: #666666; 
     text-decoration: none; 
     display: block; 
    } 
    #menu ul li a:visited{ 
     color:purple; 
    } 
    #menu ul li a:hover { 
     color:black; 
    } 
    #content { 
     float: left; 
     width: 655px; 
     height: 100%; 
     padding-left: 15px; 
     letter-spacing : 1; 
     border-left: 3px solid black; 
    } 
    </style> 
</head> 

<body> 

<div id="wrapper"> 
    <div id="header"> 
     <a name="top"></a> 
     <div id="logo"> 
       <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python"> 
     </div> <!-- End of logo --> 
     <div id="social"> 
      <ul> 
       <li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55" alt="github" title="github"></a></li> 
      </ul> 
     </div> <!-- End of social --> 
    </div> <!-- End of header --> 
    <div id="sidebar"> 
     <div id="menu"> 
      <ul> 
       <li><h4><a href="#home">Home</a></h4></li> 
      </ul> 
     </div> <!-- End of menu --> 
    </div> <!-- End of sidebar --> 
    <div id="content"> 
    </div> <!-- End of content --> 
</div> <!-- End of wrapper --> 

</body> 

</html>

出典

2016-03-27 buttonSmasher96

[footer and float left floar right divが動作しない]（http://stackoverflow.com）/questions/27889673/footer-and-float-left-floar-right-div-not-working） – BSMP

通常のドキュメントフローから要素を削除します。ラッパー要素内に複数の要素がフローティングされているため、サイドバーが左に浮かぶ前にクリアする必要があります。しかし、私はあなたのロゴの周りのdivを完全に取り除くことをお勧めします。実際には必要ではありません（その中の唯一のものはimgです）。ラッピングのdivを削除し、#header > img {}にそのセレクターを変更することにより

、あなたはまた、フロートの必要性を削除します。

body { 
 
    background: #b3d9ff; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Futura; 
 
} 
 
#wrapper { 
 
    width: 960px; 
 
    height: auto; 
 
    background: #cce5ff; 
 
    border-left: 5px solid #737373; 
 
    border-right: 5px solid #737373; 
 
    overflow: auto; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 100px; 
 
    border-bottom: 3px solid #000; 
 
    clear: right; 
 
} 
 
#header > img { 
 
    margin: 15px 0px 0px 80px; 
 
} 
 
#social { 
 
    float: right; 
 
    margin: 20px 30px 0px 0px; 
 
} 
 
#social ul li { 
 
    float: left; 
 
    list-style: none; 
 
    padding-right: 5px; 
 
} 
 
#sidebar { 
 
    float: left; 
 
    width: 275px; 
 
    height: 100%; 
 
} 
 
#menu { 
 
    float: left; 
 
    height: auto; 
 
    width: 200px; 
 
} 
 
#menu ul li { 
 
    list-style: none; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
#menu ul li a { 
 
    color: #666666; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
#menu ul li a:visited { 
 
    color: purple; 
 
} 
 
#menu ul li a:hover { 
 
    color: black; 
 
} 
 
#content { 
 
    float: left; 
 
    width: 655px; 
 
    height: 100%; 
 
    padding-left: 15px; 
 
    letter-spacing: 1; 
 
    border-left: 3px solid black; 
 
}

<div id="wrapper"> 
 
    <div id="header"> 
 
     <a name="top"></a> 
 
     <img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python"> 
 
<!-- End of logo --> 
 
     <div id="social"> 
 
      <ul> 
 
       <li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55" alt="github" title="github"></a></li> 
 
      </ul> 
 
     </div> <!-- End of social --> 
 
    </div> <!-- End of header --> 
 
    <div id="sidebar"> 
 
     <div id="menu"> 
 
      <ul> 
 
       <li><h4><a href="#home">Home</a></h4></li> 
 
      </ul> 
 
     </div> <!-- End of menu --> 
 
    </div> <!-- End of sidebar --> 
 
    <div id="content"> 
 
    </div> <!-- End of content --> 
 
</div> <!-- End of wrapper -->

出典

2016-03-27 00:50:24 TylerH

私はあなたによく理解していれば、メインdivラッパーに2つのdivとヘッダーがあります。 CSSファイルのヘッダーをスタイル設定して、#headerのCSSで両方を設定することです。

出典

2016-03-27 00:54:17

私のdivは浮動していないのはなぜですか？

答えて

関連する問題