5

I am trying to place two images of the same size side-by-side. If I use a table then I am able to display both images side-by-side. But in my CSS Stylesheet I am using a custom format for the table and this shows on the page containing the images, too.

I want to just display both images without any custom background, border, etc.

I tried using div, span, ul & li (etc.) but failed in each case.

  1. How can I place two images (of the same size) in a single line, without using a table?

  2. If I have to use table for the same, then how can I use two (or more) different formats for my tables using CSS?

Paul Roub
  • 36,322
  • 27
  • 84
  • 93
LalitBarik
  • 183
  • 1
  • 9
  • 16
  • each solution can varies depend on your need. So post your code till you have tried thing. We just clear in that. – Karthik May 15 '10 at 07:54
  • Does this answer your question? [CSS - center two images in css side by side](https://stackoverflow.com/questions/11819417/css-center-two-images-in-css-side-by-side) – Liam Mar 22 '22 at 11:35

7 Answers7

9

You can do like:

<style type="text/css">
  .left{float:left;}
</style>

<img class="left" src="path here" />
<img class="left" src="path here" />
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
2

Use float:left; you say that you are finding a little left margin so you can try this

.left{
    float:left;
    margin:0;
    padding:0;
}

this may be cause of margin or padding. or you should use body tag like

body{margin:0;
padding:0;
}

then you have no need for write margin:0; padding:0;.

GEOCHET
  • 21,119
  • 15
  • 74
  • 98
Kali Charan Rajput
  • 12,046
  • 10
  • 35
  • 46
1
  1. Have you tried float:left ?
  2. Attach a different class to every table and then in your css:
.table_one {
    background-color: #CC0000;
}

.table_two {
    background-color: #00CC00;
}
nc3b
  • 15,562
  • 5
  • 51
  • 63
  • I have tried using float:left. Also I forgot to mention in my original question, but when I use a "table", it adds a small left margin and I want to avoid that while displaying images. – LalitBarik May 15 '10 at 08:16
0

What you basically do is your put the two image source tags right next to each other in one line of code. Like this.

<img src="hi"><img src="hey">
j08691
  • 204,283
  • 31
  • 260
  • 272
Jake
  • 11
0

Generally, table is the only way that will work in all situations. Depending on where the two images are in you HTML, there may be a better way, but that depends. Is there an element that contains the two images already? What are that element's layout properties.

CSS stylesheet that changes properties of a table is a bad bad thing. One should only set properties of a class of tables (using table.className) or a particular table (using table#id). If you cannot change the stylesheet, you have to undo the damage it does to your particular table.

To do that, find out what properties the stylesheet changed on you, and change them back by issueing a CSS rule for your table (rule with table.className or table#id will override a more general rule) (preferrable) or by hard-coding the property into HTML using inline styles (fine for a quick fix if you only have one such pair).

buti-oxa
  • 11,261
  • 5
  • 35
  • 44
0

You can use float:left.

html:

<div id="row">
    <img class="left" src="" />
    <img class="left" src="" />
</div>

css:

.left{
    width: 250px;
    height: 250px;
    float: left;
}

//If you don't want margins
body{
    margin:0;
    padding:0;
}

Fiddle

Maarten Peels
  • 1,002
  • 1
  • 13
  • 29
0

Just do this: 

<img src="path/image.ext" /><img src="path/image.ext" />

It will display the images inline by default. If not, add:

<style>img {display: inline;}</style>
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60