Home/ Questions/Q 8078345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:45:50+00:00

First of all there is probably a question like this already but i couldn’t

  • 0

First of all there is probably a question like this already but i couldn’t find one for the life of me so don’t have a go at me if there is. Just direct me to it please.

The css float is behaving strange in firefox but no other browsers. I need the image in the news feed to be floated left so that the text next to it is a t the top of the image rather than the bottom. When the image is floated in firefox the inner bubble does not clear the images and the outer bubble clears none of it.

Here is the css:

#news {width:99.2%; background-color:#E9F7FE; border-radius:0.2em; padding:5px; position:relative; margin-bottom:10px}
.picture {width:70px;overflow:hidden; margin-right:5px; border-radius:0.2em; display:inline-block; float:left;}
.bubble {float:left; padding:5px;border-radius:0.2em; background-color:#E9F7FE; margin-bottom:5px; margin-right:10px; width:33.3%; margin-bottom:10px; }
.innerbubble {position:relative; background-color:white; border-radius:0.2em; padding:5px;}
#probwarn {border-radius:0.2em; background-color:#E9F7FE; text-align:center; margin-top:5px; width:100%; margin-bottom:5px; float:right;}

And the markup: 

<h1>Latest News:</h1>

<div class="innerbubble">

<a href="index.html"><div class="picture"><img src=" 
 http://newbornsounds.co.uk/artistspictures/Not%20by%20design/Andy%20Evans%20logo%205.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

News: Not By Design<br></a>

<hr>

<div class="picture"><img src=" 
  ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

<a href="JacobWindsor">New Artist: Jacob Windsor<br></a><hr><a href="JacobWindsor/gigs">

<div class="picture"><img src="     ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg"     width="100%"  alt="NewBorn Sounds" >

</div>

New Gig: a from Jacob Windsor</a><br><hr></div></div>

I’m sorry that the markup is a bit hard to read and not well formatted. It was written in PHP so has come out a little weird.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I’m understanding what you’re asking, hr {clear:both;} should fix your problem. That will cause the <hr> to always reach across the page, going below the floated images, which will push everything else down so that the images don’t end up floating next to each other (but the text still shows up next to the top of the corresponding image).

    jsFiddle: http://jsfiddle.net/ZWvCX/1/

    hr {clear:left;} is actually enough to fix the specific problem described, but it just seems appropriate for an <hr> to clear in both directions.

    • 0