floated image overflow in firefox

container doesnt auto-adjust to floated image height

[valeriab]

i have images/iframes floated on the right side of the container, with text to the left. in ie the container adjusts to the height of the image, but in firefox it adjust to the height of the text, with the floated image overflowing from the box.

one example:
[surreyandbucksbusinesscentres.co.uk...]

the css in question:
[surreyandbucksbusinesscentres.co.uk...]

seems that it is a fairly common problem and i have found a few suggested solutions, none of them seemed to work for me...

i would SO appreciate any suggestions!

[hurafloyd]

Hi Valeria,

I had this same situation, and honestly I dont know how I solved it. At the beginning I was using percentages to determine widths and heights, I made some extra changes (besides changing from percentages to pixels) and that it appears brought a solution for me.

[hurafloyd]

Sorry for the spam.

I just checked that URL you provided, you have an embedded CSS code within the website. If I am correct, the issue are the widths and heights in percentages, you need to set them with pixels or set the code in your second link, since both the embedded code and the link you provided do not match (I dont know if it is intended). Try those suggestions for the moment until somebody with more experience can give you an improved solution.

[alt131]

Hi valeriab and welcome to WebmasterWorld :)
@hurafloyd good spotting on the css - so I've brought it back so everyone is looking at the same code:

<div class="portal_item">
<p>
<a href="details.html">
<img src="myimage.gif" alt=" " width="285" height="157" border="0" class="portal_item_image" />
</a>
<span class="bold_turquiose">My span</span>
</p>

<ul>
<li>List Item</li>
</ul>
<div class="portal_menu">
...
</div>
</div><!--end portal_item-->

.portal_item_image {
border: 1px solid #999999;
float: right;
margin-left: 20px;
}

.portal_menu {
border: 1px solid #C7C7C7;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
height: 24px;
line-height: 24px;
padding-left: 10px;
padding-right: 10px;
}

but in firefox it adjust to the height of the text, with the floated image overflowing from the box.

The "box" containing the image is the <p>ara, which computes to about 18px tall, so if the image wasn't overflowing the "box" only the top part of the image would be visible. So I wonder if you meant the bottom of the image is overlapping div.portal_menu.

If I have that right, that is expected behaviour as the image is floated and removed from the "flow". That means div.portal_menu is being drawn immediately below the <ul> - not immediately below the image (as I think you want).

As hurafloyd said, one way is to set heights on the elements, but an easier way is to set clear:right on div.portal_menu to order it to "clear" the image before being drawn.