View Full Version : CSS making simple 2 columns image right text left

05-29-2012, 02:18 PM
hi, on my site, in the PEOPLE section, I'd like to make this 2 columns, it is a Wordpress site and puts in <p> tags by default


Any ideas about floating left or set width on the <SPAN> around the text?!

Please help... no tables

05-29-2012, 02:59 PM
You'd really need to wrap the details for each person in a div and float the div I think. Anything else is likely to be very messy....

You could just do this in the html tab, but obviously it's not reasonable to expect a client to do this if they're responsible for their own content.

I've dealt with precisely this requirement by creating a child page for each person, and including them on the page - this makes it simple to wrap a div around the content. In a more extreme example where there are more structured details for the person you could go further and create a custom post type, but it's probably not needed here.

05-29-2012, 03:59 PM
You could also put your image within the <p> tags and then just float your image left.

I've just created and tested this so it should do exactly what you require:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<img src="php.png" width="40%" style="float: left" height="300px" />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 150
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</p></body>



05-29-2012, 04:46 PM
Maybe I've misunderstood - I thought you were trying to create two columns - effectively two people on each "row".

If not, then, yes, just float the image as LearningCode suggests.