SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    amall layout issue

    Hi all,

    Im just woindering if it is easy to acheive something similar to my attached image using css I know it would be easy using tables but Im trying to use css throughout the site. I will be for displaying product image, description and price



    thanks in advance
    Rob

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yes, that's farily simply achieved using CSS.

    One way would be to float the description left, and give all 4 elements widths.
    The float has to be before the element in the markup you want it aligned with, so I would have them in this order
    Code:
    [title]
    [description]
    [image]
    [price]
    An even simpler way is to float the image left and have the text naturally flow around it - You can give it margin-right for the white space.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for replying.
    So would I need to add a div and then put all 4 elements in its own div within there. Sorry if that doesnt make sense but Im such a css novice lol

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You don't need any divs,

    YOu could use a heading for the title - h1, h2, h3 whichever is appropriate.
    A paragraphs for description with a floated image within it.
    A paragraph as the price - with a clear: left; property so it always appears beneath the floated image above it.


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
  •