PDA

Click to See Complete Forum and Search --> : Floats: Huge vertical space in Firefox following two floats and a BR clear:both

jwhittlestone
12-14-2007, 06:29 AM
Hi All,

Hope you could shed some light on this strange behaviour.. CSS behaving incorrectly in Firefox (a change from the norm)

In my sidebar, a P is floated to the left, the image is to the right, followed by an HTML break with clear:both. There seems to be an enormous vertical gap

Here is a screenshot of what it should look like (with firebug) (http://www.barbaryonline.com/jw/personal/firefox_div.png)

And here's what the intended layout in IE (http://www.barbaryonline.com/jw/personal/worksfineIE.png)

Here is the actual page (http://magazine.foxybingo.com/category/love/)

And here is the html

<code>
<div class="sidebar_entry">
<a href="http://magazine.foxybingo.com/category/love/love-laundry/">
<img src="http://magazine.foxybingo.com/wp-content/sidebarimages/fbm_sidebar_lovelaundry.jpg" style="float:right; padding-right:5px"><P style="float:left; width:70px; text-align:left"> left Love Laundry. Test sidebar desc. Edit in category</P></a>
<br style="clear:both">
</div>
</code>


I am using <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And it validates


Any help would be greatly appreciated! thanks a lot

Jon Whittlestone :confused:
KDLA
12-14-2007, 08:55 AM
Get rid of the clear: both. That's what's causing it. Instead, use "clear: right;"

KDLA
jwhittlestone
12-14-2007, 10:12 AM
Ahh thanks very much KDLA, it looks ok in FF but

now in IE it looks strange (http://www.barbaryonline.com/jw/personal/clearright.png)
KDLA
12-14-2007, 10:16 AM
It's because your text isn't as "long" as your image. Personally, I would encase each of those little text/image blurbs in a div, and apply a width the same width as the sidebar to prevent this type of overlap.

KDLA
jwhittlestone
12-14-2007, 10:41 AM
excellent, you star! i have alter the CSS width of the sidebar_entry as you suggested..

all works fine. happy holidays :)

Jon