images side by side

Discussion in 'CSS' started by shadowpope17, May 16, 2011.

0
  1. #1
    Hello,

    I have about 5 image links which I need to be side by side and have individual borders for each image, how can I do this in CSS or html? thanks.. :)
     
    shadowpope17, May 16, 2011 IP
  2. IAreOwn

    IAreOwn Active Member

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    95
    #2
    try applying float to your images ie

    img
    {
    float:left;
    border:1px solid #666; /*you can change this to your desired border thickness and color */
    }

    ex.
    <img src="./image1.jpg" alt="" class="img" />
    <img src="./image2.jpg" alt="" class="img" />
    <img src="./image3.jpg" alt="" class="img" />
    <img src="./image4.jpg" alt="" class="img" />
    <img src="./image5.jpg" alt="" class="img" />
     
    IAreOwn, May 16, 2011 IP
  3. Virtualize

    Virtualize Active Member

    Messages:
    370
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #3
    <img src="____" alt="" class="imgsidebyside" />
    ^ that in your html file
    in your style sheet file:

    .imgsidebyside {
    border: 1px solid #_____;
    float:left;
    }

    Fill in the blanks.
    And make sure you clear the file afterwards to avoid any float problems.

    - V
     
    Virtualize, May 16, 2011 IP
  4. Projekt.Gopher

    Projekt.Gopher Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    
#imglist img { float:left; border:1px solid #666; }
.clearfix { clear: both; }

<div id="img list">
<img src="./image1.jpg" alt="" />
<img src="./image2.jpg" alt="" />
<img src="./image3.jpg" alt="" />
<img src="./image4.jpg" alt="" />
<img src="./image5.jpg" alt="" />
<br class="clearfix" />
</div>
    Code (markup):
    By putting all the images in a single containing div and stating that this style only applies to img tags inside that div, you'll be assured that this style wont accidentally be applied to all images on the page. The <br /> will help with positioning, since floating elements will not have their height added to the height of the parent element (important when working with background images).
     
    Projekt.Gopher, May 17, 2011 IP