0

How can I use CSS and html to place a picture on the left and right with the div tag? Or is there a better way? For instance I have:

HTML:

<img src ="..." .... ... />     <!--Picture 1-->
<img src = "..." .... .... />       <!--Picture 2-->

CSS:

img
{
align:left
}

This will align both images to the left. How can I "identify" both image elements and then align one left, and the other right. Both images are aligned with respect to a centered java applet.

Cœur
  • 37,241
  • 25
  • 195
  • 267
CodeKingPlusPlus
  • 15,383
  • 51
  • 135
  • 216
  • 1
    `align:left` is not CSS. Maybe you want `float:left`, or `text-align:left` to the parent – Oriol Sep 10 '12 at 22:57

3 Answers3

2

You can also cut down on your HTML code by using the :first-child psuedo selector.

For example:

<div id="pictures">
    <img src="..." />     <!--Picture 1-->
    <img src="..." />     <!--Picture 2-->
</div>

#pictures img:first-child{
  float: left;
}

#pictures img {
  float: right;
}

This will make the first image in your target div float left, and all of the others right. Great if you only have one or two images, but if you have multiples it could be easier to just add classes as recommended in the other comments.

streetlight
  • 5,968
  • 13
  • 62
  • 101
1

you can identify with "class" tags

<img src ="..." class="img1" />     <!--Picture 1-->
<img src = "..."class="img2" />       <!--Picture 2-->

.img1
{
...
}

.img2
{
 ...
}
Mandar
  • 498
  • 1
  • 4
  • 17
0
<img src="..." id="image_1" />     <!--Picture 1-->
<img src="..." id="image_2" />     <!--Picture 2-->

#image_1 {
  float: left;
}

#image_2 {
  float: right;
}

Note: Remove spaces before and after "=" like you have for "src"

weexpectedTHIS
  • 3,358
  • 1
  • 25
  • 30