CSS div floats below parent div when I float:left

Question

The div "headerlinks" floats through the the bottom left of the div "header" but if I reload the page the div is in the correct place. I don't know if its my css or a browser bug. I am using Chrome 29.0.1547.62 (Official Build 219432) Mac OS X.

Demo

<div id="header">
    <a href="/">
    <img src="blackdiamondcraft.com/title.png" alt="Home"></a>
    <div id="headerlinks">
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
    </div>
</div>

CSS

.boxlink {
    background-color: #cccccc;
    border: solid #999999 1px;
    padding: 5px;
}
#header {
    background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
    background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
    border-radius: 10px;
    padding: 3px;
    border: solid 4px black;
    margin: 4px;
}
#headerlinks{
    float: right;
    padding: 10px;
    background-color: #66ffcc;
    position: inherit;
    border-radius: 7px;
    border: solid #000 1px;
}

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

You need to clear your floats, use overflow: hidden; on parent element

#header {
   background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-                     stop(100%,#91e842));
   background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
   border-radius: 10px;
   padding: 3px;
   border: solid 4px black;
   margin: 4px;
   overflow: hidden;
}

Demo

Even a better way to do is use a self clearing parent element using the below snippet

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Demo

Explanation : When you float your elements to the left or right, the parent element collapses as it has no idea that whats the height of your parent element, inorder to fix that, you need to clear floats with the above solutions I provided, apart from this, you can also use clear: both;, for a better understanding, you can refer to my answer here or here.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 07 '13 at 04:41

Mr. Alien

153,751
34
298
278

The div "header" gets its height from an image [link] (http://blackdiamondcraft.com/title.png) so is clear:both; required? – will lamb Sep 07 '13 at 05:15
@AW3SOMELOLwUT Didn't got you – Mr. Alien Sep 07 '13 at 05:16
The div gets its width from an image, does #header need clear:both; if there is an image that is higher than the hight of #headerlinks – will lamb Sep 07 '13 at 05:20
@AW3SOMELOLwUT yes, read my answers, it is a good practice to clear your floating elements, I've provided you 2 links which are related to this – Mr. Alien Sep 07 '13 at 05:22

CSS div floats below parent div when I float:left

1 Answers1