Question

Thanks to the generous help of someone at stackoverflow, I was able to put different colored CSS boxes over different images and remove the css boxes (revealing the images) whenever there was a mouseover. this is the code i used fiddle http://jsfiddle.net/alexdickson/fyYcC/

However, I also wanted the boxes to align horizontally in a float, so (being a beginner) I put another class (called float) around the images (in class rollover) but it deactivated the rollover.

Is there a better way to implement the float than I have done below?

Thanks for your help in advance

<div class="float">
<div class="rollover a">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg"  />
</div>
</div>

<div class="float">
<div class="rollover b">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg"  />
</div>
</div>
<div class="float">
<div class="rollover c">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg"  />
</div>
</div>

.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}

Answer 1

You can add the float class directly to the class of the inner div.

Also, float generally isn’t a very good class name. You should give it a semantically meaning name, and attach its presentation via the CSS. You are leaking CSS implementation details into the HTML.

jsFiddle.