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?

[Jibbish]

<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

[Tom-743]

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

[Jibbish]

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

[iTech]

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

[L?KE]

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

add


overflow: auto;
width: 100%;


to the container?

[Tom-743]

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

add


overflow: auto;
width: 100%;
to the container?
Thanks, that has fixed it :)

[L?KE]

;) good