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?

Code:

---

<div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0; padding: 0; margin: 0; border: 0;">&nbsp;</div>

---

add that after your text

Quote:

---

Originally Posted by Linkin Park

Code:

---

<div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0; padding: 0; margin: 0; border: 0;">&nbsp;</div>

---

add that after your text

---

I was doing that before, but is there any way to do by adding something to .mid or .bottom?

try adding
clear: both; width: 100%; height: 0; line-height: 0; font-size: 0; padding: 0; margin: 0; border: 0;
to the css of bottom or mid

Quote:

---

Originally Posted by Linkin Park

Code:

---

<div style="clear: both; width: 100%; height: 0; line-height: 0; font-size: 0; padding: 0; margin: 0; border: 0;">&nbsp;</div>

---

add that after your text

---

Why should he add that, when he can do it in CSS?

& try to Span it.

I know how to fix this.. :) I had the same problem

add

Code:

---

overflow: auto;
width: 100%;

---

to the container?

Quote:

---

Originally Posted by L?KE

I know how to fix this.. :) I had the same problem

add

Code:

---

overflow: auto;
width: 100%;

---

to the container?

---

Thanks, that has fixed it :)

;) good