/    Sign up×
Community /Pin to ProfileBookmark

Floats: Huge vertical space in Firefox following two floats and a BR clear:both

Copy linkTweet thisAlerts:
Dec 14.2007

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

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

[URL=”http://www.barbaryonline.com/jw/personal/worksfineIE.png”]And here’s what the intended layout in IE[/URL]

[URL=”http://magazine.foxybingo.com/category/love/”]Here is the actual page[/URL]

And here is the html

<code>

[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]

</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 ?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLADec 14.2007 — Get rid of the clear: both. That's what's causing it. Instead, use "clear: right;"

KDLA
Copy linkTweet thisAlerts:
@jwhittlestoneauthorDec 14.2007 — Ahh thanks very much KDLA, it looks ok in FF but

now in IE it looks strange
Copy linkTweet thisAlerts:
@KDLADec 14.2007 — 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
Copy linkTweet thisAlerts:
@jwhittlestoneauthorDec 14.2007 — excellent, you star! i have alter the CSS width of the sidebar_entry as you suggested..

all works fine. happy holidays ?

Jon
×

Success!

Help @jwhittlestone spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...