Put pictures side by side

andybr1ggs · Jul 2, 2010

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

blacknight9 · Jul 2, 2010

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

beaglejuice · Jul 2, 2010

GreyWolf · Jul 2, 2010

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.

voyevoda · Jul 9, 2010

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>

nomore · Jul 9, 2010

beaglejuice said:
<table>
<tr>
<td>img code 1x1</td>
<td>img code 1x2</td>
</tr>
</table>

seriously! why make it harder than it has to be? Quick and dirty table row will do the trick.

Put pictures side by side

andybr1ggs

Registered Member

blacknight9

Newbie

beaglejuice

Power Member

GreyWolf

Elite Member

voyevoda

Regular Member

nomore

Newbie

Main Menu

Marketplace

Making Money

BlackHat World