Horzontal row of images with text

Discussion in 'CSS' started by AbdullahFarouk, May 4, 2011.

0
  1. #1
    I was wondering how to best write the CSS to show a horizontal row of 3 images with text to the right of each image, like in this photo
     
    AbdullahFarouk, May 4, 2011 IP
  2. karthimx

    karthimx Prominent Member

    Messages:
    4,959
    Likes Received:
    127
    Best Answers:
    2
    Trophy Points:
    340
    #2
    Just add each image and make them float left in css

    <html>
    <body>
    <img src="imageurl/image.jpg" style="float: left;" />
    <img src="imageurl/image.jpg" style="float: left;" />
    <img src="imageurl/image.jpg" style="float: left;" />
    </body>
    </html>
     
    karthimx, May 4, 2011 IP
  3. ken.sweet

    ken.sweet Active Member

    Messages:
    683
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    93
    #3
    Its better to use divs.
    <div class="pic-main">
    <div class="pic"><img src="images/image1.jpg" alt=""/></div>
    <div class="pic"><img src="images/image2.jpg" alt=""/></div>
    <div class="pic"><img src="images/image3.jpg" alt=""/></div>
    </div>

    css:
    .pic-main{
    width:600px;
    height:auto;
    float:left;
    }

    .pic{
    width:170px;
    height:auto;
    float:left;
    margin-right:10px;
    }


    You need to keep a little margin else all pics will stick together.
     
    ken.sweet, May 6, 2011 IP