user3526204 user3526204 - 3 months ago 5
HTML Question

Not able to clear floats in responsive css

I am creating a mobile screen specific set of style in my css.

HTML

<div id="rowlinks">
<div class="rlleft">
<div class="rllefta">
<a href=""></a>
<a href=""></a>
</div>

<div class="rlleftb">
<a href=""></a>
<a href=""></a>
</div>
</div>

<div class="rlright">
<div class="rlrighta">
<a href=""></a>
<a href=""></a>
</div>

<div class="rlrightb">
<a href=""></a>
<a href=""></a>
</div>

</div>
<div style="clear:both"></div>
</div>


CSS

#rowlinks{clear:both;padding:10px;background-color:whitesmoke;margin-top:10px;border:1px solid grey;border-style:outset}
#rowlinks a{color:black;text-decoration:none;font-size:16px}

.rlleft{width:45%;float:left;}
.rllefta{float:left;width:45%;padding:10px;}
.rlleftb{float:right;width:45%;padding:10px;}

.rlright{width:45%;float:right;}
.rlrighta{float:left;width:45%;padding:10px;}
.rlrightb{float:right;width:45%;padding:10px;}

@media only screen and (max-width: 1024px) {

#rowlinks{clear:both;width:95%;margin:0px auto;}
#rowlinks div{clear:both;width:95%;margin:0px auto;border:1px solid maroon}
#rowlinks a{clear:both;margin:0 auto;font-size:16px;;width:80%}

}


Now my issuse is,

Though all the divs lay out horizontally perfect on desktop and bigger screens, on mobile layout as I have shown, I want it to stack one below the other in symmetry. I have used clear:both for clearing floats. However, it is not clearing the floats and is not stacking one below the other.

What am I doing wrong?

Answer

If you want to remove float: left, add float: none. Float: none removes all floats.

Comments