Display two images side by side on an HTML Page

Question

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?

Solution 1

You can do like:

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

<img class="left" src="path here" />
<img class="left" src="path here" />

Solution 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;.

Solution 3

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;
}

Comments

[Karthik]

each solution can varies depend on your need. So post your code till you have tried thing. We just clear in that.

[Liam]

Does this answer your question? CSS - center two images in css side by side

[LalitBarik]

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.

[L̲̳o̲̳̳n̲̳̳g̲̳̳p̲̳o̲̳̳k̲̳̳e̲̳̳]

uh can't you style a list for generalization, or if you really only need two things use a styled div?

[jhcaiced]

Thanks for the code, it works and solves the issue of images that are not shown side by side.