CSS Float Alignment Not Dropping Down

StackOverflow https://stackoverflow.com/questions/20858398

  •  23-09-2022
  •  | 
  •  

Domanda

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>
È stato utile?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top