SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning images with column text

    Hi,

    Can anyone tell me how to align images with a column of text. I am showing examplesof work with text running along side.

    Currently I am using float: left but what I would like ideally is to have the images on the left and my text run down the right (and NOT wrap around the image at the bottom). So that I end up with a neat column of text and the images aligning vertically with the paragraph which relates to it.

    Is this possible? or would I need to seperate the two elements into two different div's?

    Sorry if this is not clear! Any help appriciated.
    Martin

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Best to be done w/two spans. Example upon request
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would love to see an example. Thanks for the offer.
    Martin

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <style>
    div.columns {
    width: 500px; /* Or whatever */
    display: table-row;
    }

    div.columns span {
    display: table-cell;
    width: 34%;
    vertical-align: top;
    }

    div.columns p {
    display: table-cell;
    width: 65%;
    vertical-align: top;
    }
    </style>

    <div class="columns">
    <span><img src="photo.jpg" /></span>
    <p>Text goes here</p>
    </div>

    Doesn't have to be EXACTLY like this, but close.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Zealot martin's Avatar
    Join Date
    Jun 2001
    Location
    London
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that posting - excellent example. Although it only seems to work in Navigator 6/7 rather than IE 5.2 (Mac) - sigh! guess the CSS support is not quite up to scratch...

    Still this has really helped, I can expand on this for my site.

    Thanks for all your help Beetle, if you know of any sites which are using similar code I could check out then I would be very interested...

    I would say Now w/100% mo bling bling!
    Martin


Bookmarks

Posting Permissions

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