CODEWITHSUNDEEP
cssasp.nethtml
Troller
Troller

Reputation: 1138

Displaying 2 images side by side with space (Css)

I am displaying 2 images side by side in my webpage. I am trying to keep a space in between the 2 images but i am unable to do it. I have used css to display the images side by side.

Here is my Html Code :

 <div id="divCenter">

       <img src="Company Logo.jpg" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/>

          <%-- Code for the motion image --%>



      <object type="application/x-shockwave-flash" data="animation.swf" width="719" height="174" id="divIDTwo">
      <param name="movie" value="animation.swf" />
      </object>

       </div>

Here is my css code :

 #divCenter {
    text-align: center;
 }

 #divIDOne {
     margin-right: 200px;
  }

 #divIDTwo {
     margin-left: 300px;
 }

Here is what it displays :

enter image description here

Ask you can see there is no space between the 2 images. How do i solve this problem?

Thank you for your time

Upvotes: 0

Views: 11899

Answers (4)

Chưa biết
Chưa biết

Reputation: 969

Use margin or padding for image

CSS:

#divCenter
{
     /*display:inline-block;*/ /*if need*/
     width:98%; /*your value*/
}
#divCenter img
{
     margin-right: 10px;     
}

Upvotes: 0

ARJUN
ARJUN

Reputation: 409

Instead of text-align:center; use margin:0px auto; and specify width and height property. Try this. HTML

<div id="divCenter">
       <img src="#" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/>
<!-- <%-- Code for the motion image --%> -->
      <object type="application/x-shockwave-flash" data="animation.swf" width="780" height="174" id="divIDTwo">
      <param name="movie" value="animation.swf" />
      </object>
</div>

CSS

#divCenter {
  margin:0px auto;
  width:960px; 
  height:auto;
  padding:10px;
}

 #divIDOne {
     margin-right: 0px;
 }

 #divIDTwo {
   margin-left: 20px;
 }

Fiddle

Upvotes: 1

OshoParth
OshoParth

Reputation: 1552

You can set the display property to the inline value i.e. display=inline and if required you can give some margin for the images this will add space between them. To be more precise you can set the margin-left property of the right image to desired value or the margin-right property of the left image to the desired value to add space between them .

Upvotes: 1

शेखर
शेखर

Reputation: 17614

You can use padding or margin to get space between two Images.

#divCenter {
    text-align: center;
}
#divCenter image {
    padding:2px;
    margin:2px;
}

But better approach is to keep the images in a container like li or div or td.

Upvotes: 1

Related Questions