CSS Question/Help

[Kirkpatrick]

Okay, here's the situation:

I'm trying to have a div contain an image that is right aligned*, with text to the left. However, I want the div to be the height of the image (or greater, if there is more text).
Floating the image removes it from the content flow of the div from what I've seen, so that it's too small for the image if there isn't enough text.

There will be multiple divs with different images, and different text, so a set height for the div (the class of divs, really) won't work, same with a min-height (not that IE seems to like that anyway, big surprise).

So, I'm wondering if there are any ways to accomplish this, thanks.

*It's not really important that the image be right-aligned, left-aligned would be fine if all the rest worked, it's just an asthetic thing.

[bipper]

I googled quick to find a decent tutorial on Float, as this property causes grief to a lot of people.
http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm

That one came up, and it was actually a great read. Float should work properly in newer browsers, if you are using relativley old, unupdated versions of browsers, float will not appear to work correctly.

float should not break alignment in a div as you mentioned unless there is not enoughtext to make the div expand far enough to encase the picture. If the picture stays outside of the div, I would say there is another problem. If you need to post your code go for it.

Let me know if anyof that helps
Bipper

[Kirkpatrick]

Thanks for the link; I read that once a long time ago, but it does have some great stuff.

That is precisely the problem though, the case where there isn't enough text to expand the div. Just setting the height of the div isn't really what I'm looking for, since if the text size changes, then it would overflow the div. Min-height would be good (though irritating to set for each div) if IE supported it, which to the best of my testing it doesn't.

[rubah]

You don't have to set it to each div, set it so something that they would all inherit it from.

I think I've had that trouble with someone before and I'm trying to think what we did to get around it.

Does this help?

http://www.snowy-day.net/lo l ol.html (:( the filter caught it. remove the spaces)

(Vyk was trying to get the faces to show up so he could make a something or other, but he ran into your text problem. We tried several things like min-height, and I think that display:table; finally got it to work for us. The stylesheet is embedded and should be simple enough.

[Dr Unne]

This is untested code, but isn't this what <strong>clear</strong> is for?


&lt;div>Text before etc.&lt;/div>

&lt;div style="border: 1px red solid">
&lt;div style="float:right">&lt;img src="some_image.png" style="height: 100px; width: 100px" alt="blah" /> &lt;/div>
Blah blah blah text blah
&lt;div style="clear:both">&lt;/div>
&lt;/div>

&lt;div>Text in between etc.&lt;/div>

&lt;div style="border: 1px red solid">
&lt;div style="float:right">&lt;img src="some_image.png" style="height: 200px; width: 200px" alt="blah" /> &lt;/div>
Blah blah blah text bigger image blah
&lt;div style="clear:both">&lt;/div>
&lt;/div>

&lt;div>Text after etc.&lt;/div>

[Vyk]

This sounded like the same problem I ran into. Min-height eventually gave me an easy way to do what I was looking for. But rubah and I played with it for quite a bit and she found a harder way to get around it. Hope my example she posted helps a little.

[bipper]

yeah, min-hight is the answer here :) Though it can get buggy with some browsers when nesting floats. g'luck!

[Kirkpatrick]

Yeah, that was the problem with min-height; I know a lot of people visiting the site are using IE, and I would have had to set it for each div, depending on the image.

Dr. Unne's solution worked perfectly, though I had to change the clear to only "right", instead of both, due to other elements on the page.

Thanks all!