CSS float

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

HTML Code:

---

<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 :).

Maybe try

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

Quote:

---

Originally Posted by SyrupyMonkey

Maybe try

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

---

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

Quote:

---

Originally Posted by Tom-743

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

---

Underneath when you actually view it in a browser?

It shouldn't do...

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

That should be right.

Quote:

---

Originally Posted by Arshavin

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.

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.

Quote:

---

Originally Posted by Arshavin

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"

Code:

---

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

---

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

A little pointer which may be of use:

Code:

---

<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.

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