CSS Float Alignment Not Dropping Down

Question

I cannot seem to get my float to behave as I expect them to. I am attempting to create a four panel setup, like the windows logo. The problem is, the fourth panel keeps staying flush with the last block of the top row. I am running this in IIS6 in IE7. It runs fine in the fiddle below as well as on IIS7, but I cannot get the same behavior in IIS6. http://jsfiddle.net/9GCrm/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-right:10px;
    margin-bottom:10px;
    padding:3px;
}
#repedits
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-bottom:10px;
    padding:3px;
}

#mgrslist
{
    background-color:blue;
    height:250px;
    width:300px;
    clear:both;
    float:left;
    margin-right:10px;
    padding:3px;
}
#importdiv
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
    <div id="replist">

    </div>
    <div id="repedits">

    </div>
    <div id="mgrslist">

    </div>
    <div id="importdiv">

    </div>
</div>
</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

just remove clear:both; from #mgrslist and instead add it as a separate class, like :

<div id="admindiv">
    <div id="replist"></div>
    <div id="repedits"></div>
    <div class="clr"></div>
    <div id="mgrslist"></div>
    <div id="importdiv"></div>
</div>

demo here

Why it works?? because <div class="clr"></div> will clear the float for all the divs before it but adding it to the class will only clear:float for that particular class and not the pre-divs before that class!!

Also, now that pseudo classes like :before and :after exist, its better practice to use them for clearing a float.
Read this thread to understand it better : replace the clear:both with pseudo class

edited May 23 '17 at 10:25

Community

1
1

answered Dec 31 '13 at 13:53

NoobEditor

15,563
19
81
112

... Why does that work and the other doesn't? Is this just another IE issue? – steventnorris Dec 31 '13 at 13:59
1

@steventnorris : no, its not IE issue (*this doesn't mean IE has no issues* ;) )..anyways...updated the edit part...check if that helps u to undertand!! :) – NoobEditor Dec 31 '13 at 14:06
So why doesn't adding clear:both to the mgrslist div clear the replist and repedits div just like the clr div does? Why is that clr div so special? It doesn't seem to make sense. It works, just doesn't seem to make sense. – steventnorris Dec 31 '13 at 14:56
2

glad you asked, check this : http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it – NoobEditor Dec 31 '13 at 15:03
Ok, so let me see if I've got this: A cleared AND floated item, while it may "clear" causing it to drop, will not affect the height, thus the next floated item falls in line with the height (putting it back at the top row), while a item that is only cleared, affects the height and adds a content buffer, thus allowing a second row of space where the next floated items will be placed? that seems a bit odd and non-logical, but hey, CSS is what it is. – steventnorris Dec 31 '13 at 15:08
you are adding the `clear:both` to `mgrslist` inside a div and then adding `float:left` to it again, so this basically doesnt clear the floats out of div, it simply nullifies them till it reaches the next `float:left` line ....adding `clear:both` in separate div clears the `float` without assigning any new float.Remove `float` from `mgrslist`and it does the same job as `clr` class in fiddle. – NoobEditor Dec 31 '13 at 15:10
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44246/discussion-between-noobeditor-and-steventnorris) – NoobEditor Dec 31 '13 at 15:15

CSS Float Alignment Not Dropping Down

1 Answers1