div height problem

problems in mozilla and ie 4

[HelenDev]

I have a div which contains some text and an image. The image is always 50px in height and aligned right. I want the div to contain all the text and image inside it.

My div is styled like this

.listbox {
background-color: #daf2e6;
width:100%;
clear: both;
padding:0px 0px 0px 2px;
border-left: #009966 3px solid;
}

This works OK in ie 5 and 6.

In Mozilla the images poke out the bottom of the div if I only have a few words of text. Even worse things happen in Moz if I take out the clear: both; as I have these divs stacked above each other and the images start to move about and wrap around each other.

If I take out the clear: both; however, it works properly in ie4.

Any suggestions would be gratefully received.

[createErrorMsg]

What is the clear:both clearing, exactly? What elements are floated in the layout and, specifically, is anything INSIDE of this box floated?

[auxum]

its been awhile - any new info Helen?

[HelenDev]

I must confess that there isn't anything floating at all, I just put that clear:both; in as part of a trial and error process because it appears to stop the images (which are right aligned) doing odd things in Firefox.

It's kinda hard to explain, but because the divs do not stretch to the height of the images in FF and they poke out of the bottom, when you stack these above each other, the images start to push each other out the way and won't align right properly. Putting in the clear:both; seems to stop this happening but I don't know why. It doesn't solve the problem of the divs not being as tall as the images in FF though.

[johnl]

w3c (css 2.0 here) says:

[clear] indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)
This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

[clear: both]: The generated box is moved below all floating boxes of earlier elements in the source document.

So one still wonders as createErrorMsg says, What elements are floated in the layout and, specifically, is anything INSIDE of this box floated?

It might perhaps be helpful to invest into a more complete example to clarify the question before the answer.

[createErrorMsg]

Putting in the clear:both; seems to stop this happening but I don't know why. It doesn't solve the problem of the divs not being as tall as the images in FF though

Helen, is there any chance that you've got a floated element in there that you're missing? I'm wondering especially if the images are floated. Two reasons why, both from the above quote.

One, the clear property works exclusively on floated elements. So if it's presence is making a difference, it must be working on something floated.
Two, the fact that the image poke out of the bottom of the div, and that this happens in a compliant browser like Moz, indicates to me that the images are floating. This poke out of the bottom thing is precisely what the float property is for. The only other property that could cause this is absolute positioning, which also removes elements from the flow, but it doesn't look like you've used that.

Bottom line: I think somewhere in your styles there's a floated element, and I really think it's the images.

Any chance of a code-post?

<ADDED>
Just noticed this in your original post...

This works OK in ie 5 and 6.

Which is further evidence that the images are floating. IE browser automatically enclose floats (which is a spec violation on their part). Compliant browser do not enclose them, thus allowing things like images to sneak out of the bottoms of their containers.

Try this...add a float property to the box that the images are hanging out of and see if it fixes the problem. (A floated box will enclose it's floated children.)
</ADDED>

[SuzyUK]

The image is always 50px in height and aligned right

I must confess that there isn't anything floating at all

>>Floats Somewhere

align is the HTML equivalent to Float

[HelenDev]

align is the HTML equivalent to Float

Aha, now we're getting somewhere! I was sure there weren't any floats in this part of my code, but there is definitely an aligned image in my html - I didn't realise they were the same thing!

Here is my code, for clarification:

<div class="listbox"> 
<img src="../images/image1.jpg" alt="" width="50" height="50" align="right" />
This is the description of my first item.
</div>
<br />
<div class="listbox"> 
<img src="../images/image2.jpg" alt="" width="50" height="50" align="right" />
This is the description of my second item.
</div>

.listbox {
background-color: #daf2e6;
width:100%;
clear: both;
padding:0px 0px 0px 2px;
border-left: #009966 3px solid;
}

Perhaps I should be aligning my images with css instead? I really don't care how I do this, I just want a div which will contain all the image and text I put inside.

Thanking you for all your help so far :)

[HelenDev]

Try this...add a float property to the box

createErrorMsg, just tried your suggestion - and it works in FF. Cheers!

However, weird stuff abounds in ie4. My divs now sit next to each other horizontally which is not good. Maybe I need to put something in between them to stop this? I'll have a go.

[createErrorMsg]

weird stuff abounds in ie4

I'm afraid that's par for the course. From what you describe, it sounds like it's not clearing the floats. It may be that ie4 doesn't support the clear property. I personally don't even make an attempt at getting ie4 (or older versions of netscape) in the loop. If I can get a page working reasonably well in ie5 and up, I'm happy.

[auxum]

Looking at the site you emailed me a link to, I noted that what I see as the problem doesnt seem directly presented. A more verbose example, here in the forum, might be appropriate. I think your problem is your line-height statement.

line-height: 200%; 

I noticed this when I decided to test the link... often I go 'mouseless' for testing purposes, and I noted when the 'focus' was on the link, it was larger than the image or the text.

In a test location I created, I removed the line-height statement and the text still seemed a little off to me, so I changed it to

line-height: 150%; 

and it seems to work better, although if you ever alter the button image, its height or the button text size, this is certainly going to change.

hth.. Cheers!