Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question CSS making simple 2 columns image right text left

    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

    http://apl.inpreview.net/#people

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

    Please help... no tables

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    
    <html>
    <head>
    </head>
    <body>
    
    <p>
    <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>
    </html>
    Regards,

    LC.
    Last edited by LearningCoder; 05-29-2012 at 03:50 PM. Reason: Readability

  • Users who have thanked LearningCoder for this post:

    jarv (05-29-2012)

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • Users who have thanked SB65 for this post:

    jarv (05-29-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •