Why is my div not floating left?

Question

I'm trying to put my nested <div id="sidebar"> to the left by using float: left;, but it's not working. Instead it just stays in the middle of the page.

   <!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>

Possible duplicate of [footer and float left floar right div not working](http://stackoverflow.com/questions/27889673/footer-and-float-left-floar-right-div-not-working) — BSMP, Mar 27 '16 at 00:52

TylerH · Accepted Answer · 2016-03-27T00:58:04.050

Using float removes elements from the normal document flow. You have multiple elements floated left within a wrapper element, so you need to clear them before your sidebar can float left, too. However, I'd suggest getting rid of the div around your logo entirely, as it's not really necessary (the only thing in it is your img, which you can style directly).

By removing the wrapping div and changing its selector to #header > img {}, you also remove the need for the float:

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 -->

score 0 · Answer 2 · answered Mar 27 '16 at 00:54

0

If I understand you well; you have 2 divs "header" and "sidebar" in a main div wrapper. The best thing to do is to style your header in the CSS file to set clear:both in your CSS for #header

answered Mar 27 '16 at 00:54

Chidi Nkwocha

1
4

Why is my div not floating left?

2 Answers2