CODEWITHSUNDEEP
htmlcss
Corentin Branquet
Corentin Branquet

Reputation: 1576

Float two images

I've this code

.container {
    background-color: #ececec;
    width: 100%;
}
<div class="container">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x100">
</div>

I want the first image to be at the left of the .container and the second one at the right.

Theses images have to be centered, and I don't wanna use flexblox (I heard about trouble of compatibility like IE)

Thanks for your answers !

Upvotes: 1

Views: 45

Answers (2)

max
max

Reputation: 8667

You can use tables for that.

.container {
  background-color: #ececec;
  width: 100%;
  display: table;
}
.img-container {
  display: table-cell;
  vertical-align: middle;
}
.image2 {
  text-align: right;
}
<div class="container">
  <div class="img-container">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="img-container image2">
    <img src="http://placehold.it/150x100">
  </div>
</div>

Upvotes: 2

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Like this? https://jsfiddle.net/rfb31uto/

.container {   
    background-color: #ececec;
    width: 100%;
}
img{vertical-align: middle;}
img:nth-child(2) {
    margin-left: calc(100% - 305px);
}

Upvotes: 0

Related Questions