Article Layout

Hey everyone, ok i was wondering how its done on other sites the layout of articles.

as you can see mines is basically verticle, but id like the biography to be on the left and the little image to be on the right so that the biographys text kind of goes around it. I know this can be done as ive seen many sites with css having layouts like this in their blogs.

But for the life of me i cant find any tutorial via google that shows me.

heres my page just now http://www.juicingforum.co.uk/cuc.php

anyhelp is appreciated

 

Just float the image to either left or right depending on your preferences. So something like:

#content img{ float:right; }

Code (markup):

Obviously you'll probably want to do more styling to this, e.g to add a bit more of a gap around the image, you can do this by adding a margin to it, so the code would then become:

#content img{ float:right; margin:10px 10px 0; } 

Code (markup):

But remember this code will apply to all images inside the content DIV, so it's probably better you give the images you want to float a special class say, float-image like:

<img src="images/cucben.gif" alt="Cucumber Juice" [B]class="float-image"[/B] />

Code (markup):

Then the CSS would become:

#content .float-image{ float:right; margin:10px 10px 0; border:1px solid #6B6B6A;} 

Code (markup):

So the float would now only apply to images with the class float-image inside the content DIV, rather than all images that exist in the content DIV.

 

thanks ill give this a little play with, cheers for taking the time.

will the biography text wrap around the floated image?

 

No problem, for sure it'll wrap if the text is longer than the image.