Floating Image Affect DIV Height

**Antnee** · Dec 15, 2007 20:08

Hi guys

The latest CSS to baffle me is as follows: I've got a DIV that has a very small amount of text on the left, and an image that floats on the right. The image size varies (though I'm restricting the width) and I need the entire DIV to become the height of the image. At present, the images all stack on top of each other on the right and the text on top of each other on the left. The text becomes further and further separated from the associated images as you go further down the page.

Without fixing a DIV height, is there a way to get the text to start at the same height as the image, only to the left?

I have considered putting it in a table, just because I know it will work that way, but the site is for someone else and she won't be able to read through the HTML and maintain it properly that way.

Cheers in advance guys

**Dan Schulz** · Dec 15, 2007 23:05

Stick the image inside the DIV, then contain the text inside a P element, and float the image to the right. You may also want to consider floating the paragraph as well (but to the left).

**Antnee** · Dec 16, 2007 07:07

That's kinda what I've done already so I probably don't understand what you're getting at.

Code:

    <div>
        <a href="#">
            <img src="images/DSCF6334.JPG" class="imageclass" border="0" align="right" />
            <h3>Header</h3>
            <p>Comments</p>
        </a>
    </div>

What would you change? I tried setting the imageclass to float right but it seems to do the same thing as using align="right"

For the time being, I'm just setting the div to have the height of the image which works, but it's not ideal

**Dan Schulz** · Dec 16, 2007 08:05

Take the heading and paragraph outside of the anchor. Anchors are inline elements and thus cannot contain block-level elements.

**Antnee** · Dec 16, 2007 08:41

OK, I do that and it's exactly the same (I even removed the anchor completely), the small amount of text is all bunched up under each other and the much larger images are one on top of the other on the right. I need to just get the image to sit on the right as if it were in a separate table cell and the text be aligned to the top of the left cell, but with CSS if possible

**Dan Schulz** · Dec 16, 2007 09:14

Tell you what. It's getting late for me (despite being past 9am - I've been up nights lately), so why don't you post a picture of how you want it to look and I'll see what CSS magic I can work, ok?

**Paul O'B** · Dec 16, 2007 10:35

Hi,

Do you mean something like this:

http://www.pmob.co.uk/temp/caption30.htm

**Antnee** · Dec 16, 2007 14:36

Yes Paul, as usual, that's pretty much bang on, only I need invisible borders etc. I'll take a look at your CSS if you don't mind and see what I can use from it.

Thanks, AGAIN! (Don't know why I don't have a personal line straight to you TBH!)

Dan, thanks for your input, sorry I couldn't be specific enough for you to help any more