Divs and floating images

[AdRock]

I have a problem and don't know how to sort it out
I have an image which is 400 x 400 which currently is floated left.

I also have a paragraph of text which I would like to be positioned under the image but becuase the div is wider than 400px the text is wrapping around the image.

I am using a 3 column liquid layoutso if the user resizes their browser window it all adjusts correctly.

I did have an idea that I could use a div to hold the image and a seperate div to hold the text content. Both of these divs would be in a container div but what I tried didn't work, the text still wrapped aroud the image.

How can i set the 2 div widths and position the image centered so the text stays at the bottom of the screen?

[karloff]

postion : 0 may put the image to the bottom (if i understand the problem correctly then apply margin : 0 auto; to centre it.
probably going down the wrong route ... too much wine

[Ryan Fait]

position: 0; is not CSS. Positioning is not what you're going to want to use. I'm a little confused. Are you saying you want the image to be aligned to the left but the text to start under it instead of beside it?

[pa007]

Try wrapping the text in a seperate div and using clear: both; on it that way it should appear under ('clear') any floated elements above it, but again I don't really know what you're getting at. That was just a stab in the dark.


Post a link or a screenshot if you can.

Pete.

[Lchad]

Here's one example that I did (Oh no is Ryan going to find a mistake?)
The HTML

Code: Select all

  <div class="divright"><img src="otherservicepic.jpg" alt="" width="200" height="150" />
 <p class="picrightp">Construction Services</p>
</div>

The css

Code: Select all

.divright {
	width: 200px;
	float: right;
	margin-right: 15px;
	margin-left: 15px;
	
	}

This stacked a photo over a description that said Construction Services
Gee, I hope that helped!

[Ryan Fait]

Since you're shaking in your boots, Linda:

Code: Select all

.divright {
    width: 200px;
    margin: 0 15px;
    float: right;
}

Yours is correct, however. I just like shorthand.

[sannbe]

Originally Posted by Ryan Fait

Since you're shaking in your boots, Linda:

Code: Select all

.divright {
    width: 200px;
    margin: 0 15px;
    float: right;
}

Yours is correct, however. I just like shorthand.

Linda,

Ryan's toast. No more Mr. I just like shorthand. I'm sure we can find a good place to hide the body.
lol Sara

[Lchad]

Wahooooooooo... I was right! That's all I care about!!

Now let's hope it works for the Ad Rock!