1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Put pictures side by side

Discussion in 'Web Design' started by andybr1ggs, Jul 2, 2010.

  1. andybr1ggs

    andybr1ggs Registered Member

    Joined:
    Jun 3, 2010
    Messages:
    53
    Likes Received:
    10
    Hi

    I am using the following code
    Code:
    <h2> Recently sent to Jamie from Wolverhampton </h2>
    <p>
    <br>
    <img src="images/ck3.jpg"> 
    <img src="images/turtlebeach.jpg"> 
     
    
    the pictures look like this, but i would rather have them side by side. How can i do this ?

    thanks,

    Andy

    [​IMG]
     
  2. blacknight9

    blacknight9 Newbie

    Joined:
    Jan 1, 2009
    Messages:
    44
    Likes Received:
    37
    Home Page:
    Code:
    <h2> Recently sent to Jamie from Wolverhampton </h2>
    <p>
    <br>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/ck3.jpg" [COLOR="Red"]style="float:left; margin-right:10px"[/COLOR]>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/turtlebeach.jpg" [COLOR="Red"]style="float:left; "[/COLOR]>
    You can increase the margin-right value to increase the space between images
     
    Last edited: Jul 2, 2010
  3. beaglejuice

    beaglejuice Power Member

    Joined:
    Mar 12, 2009
    Messages:
    595
    Likes Received:
    423
    <table>
    <tr>
    <td>img code 1x1</td>
    <td>img code 1x2</td>
    </tr>
    </table>

    :D
     
  4. GreyWolf

    GreyWolf Executive VIP Jr. VIP

    Joined:
    Aug 17, 2009
    Messages:
    1,930
    Likes Received:
    5,389
    Gender:
    Male
    Occupation:
    Artist / Craftsman
    Location:
    sitting at my PC
    The code you're using actually should display the images side by side unless the browser window isn't wide enough in which case they'll drop to the next line and stack the way you're experiencing. Most browsers just use a relative width and all your content will just wrap inside the window.

    blacknight9 and beaglejuice suggested a couple ways to overcome this, and here is another. Each way has it's own advantages, so sometimes you'll want to use one way and other times you'll want to use another.

    If you want to define an absolute width for your whole page you can set up a div like this. If the browser window is wider than your page then the div will be centered in the window, if the window is smaller then you'll get a horizontal scroll bar but your page content will stay the same. The width I used is based on your pics being 555px wide, if you use different pics then just change the width in #main.
    Code:
    <head>
     <style type="text/css">
       body{
          padding:0;
          margin:0;
          }
       #main{
          width:1115px;
          margin:0 auto;
          }
     </style>
    </head>
    
    <body>
     <div id="main">
        <h2> Recently sent to Jamie from Wolverhampton </h2>
        <p>
        <br>
        <img src="http://www.blackhatworld.com/blackhat-seo/images/ck3.jpg"> 
        <img src="http://www.blackhatworld.com/blackhat-seo/images/turtlebeach.jpg"> 
        </p>
      </div>
    </body>
    
    Edit - You could also skip defining the style in the head, and do it only in the body like this.
    Code:
    <head>
    </head>
    
    <body>
     <div style="width:1115px;">
        <h2> Recently sent to Jamie from Wolverhampton </h2>
        <p>
        <br>
        <img src="http://www.blackhatworld.com/blackhat-seo/images/ck3.jpg"> 
        <img src="http://www.blackhatworld.com/blackhat-seo/images/turtlebeach.jpg"> 
        </p>
      </div>
    </body>
    
    The first way is better structured html and css coding, but sometimes you'll want to use different ways to do things.
     
    Last edited: Jul 2, 2010
  5. voyevoda

    voyevoda Regular Member Premium Member

    Joined:
    Mar 21, 2010
    Messages:
    217
    Likes Received:
    97
    Location:
    Eastern Front
    Float them to the left (as suggested) and clear the float afterwards.

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Code:
    <img src="whatever1.jpg" />
    <img src="whatever2.jpg" />
    <div class="clearfix"></div>
    
     
  6. nomore

    nomore Newbie

    Joined:
    Oct 2, 2009
    Messages:
    46
    Likes Received:
    9
    seriously! why make it harder than it has to be? Quick and dirty table row will do the trick.