How to position two images in opposite corners of one div

Question

I am not a CSS guy as you can see and I need little help on how to make this div with two images, like the drawing below

enter image description here

just fyi, not necessary opposite corners of a div but i was just giving you an visual look instead of trying to explain. — Nick Kahn, May 17 '11 at 20:03

score 4 · Accepted Answer · answered May 17 '11 at 19:45

Thomas is right but there's a even better solution:

<style type="text/css">

    #content {width: 500px;}

    .align-left { float: left; }
    .align-right { float: right; }

</style>

<div id="content">

    <img class="align-left" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <img class="align-right" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div><!-- end content -->

class are more usefull than ID in this case.

It can be, - if the image is a link it's good practice to write the destination of the link. - if the image is just decorative, you can leave it blank - if the image is meaningful you should describe what is in the picture. More info here>http://www.w3schools.com/tags/att_img_alt.asp — lipelip, May 17 '11 at 20:03
you use `title` for that, if I get what you're trying to say ! — painotpi, May 17 '11 at 20:07
The title is different: check this link > http://www.w3schools.com/tags/att_img_alt.asp — lipelip, May 17 '11 at 20:08
`The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.` We're talking with 2 different point-of-views with 2 different things in mind, so no point taking this conversation further;) User will get bombarded with notifications ! :) — painotpi, May 17 '11 at 20:12

score 2 · Answer 2 · answered May 17 '11 at 19:37

2

<style type="text/css">
#container {
   width:760px;
   border:1px solid #999;
   margin:20px auto 0;
   overflow:hidden;
 }
#top-left {
   float:left;
 }
#bottom-right {
   float:right;
   clear:both;
 }
</style>

</head>
<body>

<div id="container">
  <img id="top-left" src="" alt="">
  <img id="bottom-right" src="" alt="">
</div>

answered May 17 '11 at 19:37

Amit

21,570
27
74
94

This will only provide a top-left bottom-right setup if there is not text that could cause the height of the container div to grow to greater than the size of the two images. This is two images with a forced break from `clear:both` - the bottom image may not be on the bottom of the div all the time. Still, could be what he wants. – Ian Pugsley May 17 '11 at 19:46

score 1 · Answer 3 · answered May 17 '11 at 19:45

1

You need to float the images right and left.

Here is the CSS:

img {width:100px; height:100px; border:1px solid; margin:1em;}

.image1 {float:left;}
.image2 {float:right;}

floats need explicit widths set

Here is a jsfiddle with it all:

EDIT: updated the jsfiddle to include a surrounding div

http://jsfiddle.net/RQp5Z/1/

answered May 17 '11 at 19:45

Jason Gennaro

34,535
8
65
86

You should use meaningful classes so that you can reuse them at other places. So not .image1 & 2 but alignleft & alignright (or something like that). – lipelip May 17 '11 at 19:48
I agree that meaningful names are better @lipelip. I was just creating those names for the example. I would not use `alignleft` or `alignright` though, in case I wanted to change their alignment in the future (say, switch sides) – Jason Gennaro May 17 '11 at 19:50

score 0 · Answer 4 · answered May 17 '11 at 20:05

0

Since you're not a css guy, just created this example to help you understand what's going on with the div's http://jsfiddle.net/hT9xV/9/

answered May 17 '11 at 20:05

painotpi

6,894
1
37
70

score 0 · Answer 5 · answered May 27 '22 at 12:37

Two images can be displayed opposite to each other using the code shown below. This solution assumes the need for both images to be on the same line.

.section-container {
    width: 100%;

    .align-left {
      float: left;
    }

    .align-right {
      float: right;
    }
}

div class="section-container">
    <img class="align-left" src="assets/images/foo.svg" width="165px" alt="Foo">
    <img class="align-right" src="assets/images/bar.jpg" width="90px" alt="Bar">
</div>

How to position two images in opposite corners of one div

5 Answers5

Linked