CSS float

[Tom-743]

K, im using float to align an image to the left then have the text on the right, but then its in a box;

<div class="top">
    Hi
</div>
<div class="mid">
    <img src="hi.png" style="float: left;">CONTENT CONTENT CONTENT
</div>
<div class="bottom"></div>

There is more image than text so the background image for the <div class="mid"> doesn't expand all the way Does anyone know how to fix it?

Moved by Invent (Forum Moderator) from Designing & Development: Please post in the correct forum next time, thanks .

[myke]

Maybe try

<img src="hi.png" align="left"> CONTENENTNTNENNENTNTNE

[Tom-743]

Maybe try

<img src="hi.png" align="left"> CONTENENTNTNENNENTNTNE

I've allready tried that When i do that the text is underneath the image.

[Mounta1nGoat]

I've allready tried that When i do that the text is underneath the image.

Underneath when you actually view it in a browser?

[Janczyk]

It shouldn't do...

<img src="image.png" align="left" /> textextext

That should be right.

[Calon]

It shouldn't do...

<img src="image.png" align="left" /> textextext

That should be right.

FLOAT - Floats over/beneath image
ALIGN - Moves the image with the other things.

[Janczyk]

Align doesn't move it, it aligns it hence the name.

I've never had a problem with using align images and text using that way.

[Calon]

Align doesn't move it, it aligns it hence the name.

I've never had a problem with using align images and text using that way.

Yes, well done.

Tom - try updating the CSS for "mid"

background: url(background.whatever);
width: 100%;
height: whateverpx;

[craigg.]

I don't understand what you mean at all. Maybe post a screen shot?

A little pointer which may be of use:

<div class="top">
    Hi
</div>
<div class="mid">
    <img src="hi.png" style="float: left;">CONTENT CONTENT CONTENT
</div>
<div class="bottom"></div>

Add "text-align: right;" in your mid css. If you post a screenshot I will be able to help you.

[Excellent1]

Why don't you try span it to the left?