Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Ie7 And Ie8: Float Clearing Without Adding Empty Elements

Post a Comment
I'm having a problem similar to the one described here (without a resolution): IE7 float and clear on the same element The following HTML renders as intended in Firefox but not in

Solution 1:

Try this, demo: 

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>list floats</title><styletype="text/css">li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style></head><body><ul><liclass="">1</li><liclass="clearer">2</li><liclass="">3</li><liclass="clearer">4</li><liclass="floater">5</li><liclass="">6</li><liclass="clearer">7</li></ul></body></html>

Solution 2:

You can simply use a <br class="clear" /> with a br.clear{ clear: both; }

Solution 3:

I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.

.clear {
    clear: both; 
    margin:0px;
    padding:0px ;
    font-size:1px;
}
.solo {
    clear: both; 
}

<liclass="solo">1</li><liclass="left">2</li><liclass="right">3</li><liclass="clear"></li>

Solution 4:

try following code. much simpler but a little hard to understand! 

<!DOCTYPE html><html><head><styletype="text/css">li{list-style: none}
.float{ float:left}
</style></head><body><ul><liclass="">1</li><liclass="float">2</li><liclass="">3</li><liclass="float">4</li><liclass="float">5</li><liclass="">6</li><liclass="float">7</li></ul></body></html>

Post a Comment for "Ie7 And Ie8: Float Clearing Without Adding Empty Elements"