Fix div to make bar above image with CSS

Question

This piece of code works fine on firefox. However with everything else it doesnt work as desired. I am trying to make the X on the top right with the image beneath the title/X as it shows in the firefox image below

Answer 1

You want to make sure the image is underneath the text and the "X". In order to do this, you need to add a div that clears the space as follows:

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

Place this div under your text and the "X", and above the image div. This will guarantee the image always sits below your text without overlap.

In the context of your first box, this code would be:

<div class="temp"><div class="fn">namedkfjdjfdjfsjdfijsdifjdsfdfsddsdf.jpg</div>
<div class="remove">X</div>
<div style="clear:both;"></div>
<div class="imgdiv"><img src="http://th960.photobucket.com/albums/ae89/DarkKitteh/Stuffz/th_Avatars_Funny_Cat_With_Headphones.gif"/&gt;&lt;/div&gt;&lt;/div&gt;