Почему мой 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 и float left floar right div не работает] (http://stackoverflow.com/вопросы/27889673/сноска-и-флоат-левой floar-вправо-ДИВ-не-работает) – BSMP

Использование float удаляет элементы из нормального потока документов. У вас есть несколько элементов, расположенных слева внутри элемента оболочки, поэтому вам нужно очистить их, прежде чем ваша боковая панель тоже сможет поплыть. Тем не менее, я бы предложил полностью избавиться от 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

Если я понимаю тебя; у вас есть 2 divs «header» и «sidebar» в основной обертке div. Лучше всего сделать так, чтобы ваш заголовок в файле CSS был установлен: как в вашем CSS для #header

источник

2016-03-27 00:54:17

Почему мой div не плавает влево?

ответ

Смежные вопросы