RNxOGw

index.html

<div class ="containing-div">
  <img id ="top-left" class="box" src="https://s-media-cache-ak0.pinimg.com/736x/72/3a/d2/723ad20c5a5d80990823283077b037a0.jpg" alt="top-left" />  
  <img id="top-right" class="box" src="https://s-media-cache-ak0.pinimg.com/736x/ef/7d/e9/ef7de9c6e27ee946ff321b1aaa0eaf3e.jpg" alt="top-right" />
  
  <img id="bottom-left" class="box" src="http://1.bp.blogspot.com/-rNklzk5z3HI/VNslBEYeOYI/AAAAAAAAKzo/DCJp4JIcThM/s950/Wall%2Bhanging_150x200%2Bcm.jpg" alt="bottom-right" />
  
  <img id="bottom-right" class="box" src="https://s-media-cache-ak0.pinimg.com/736x/f8/f2/d4/f8f2d41714aee2f143c1ead45273bdea.jpg" alt="bottom-left" />
</div>

RNxOGw.markdown

RNxOGw

A Pen by Rebecca on CodePen.

License.

style.css

.containing-div {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: grey;
  /*padding: 5px;*/
}

.box {
  width: 250px;
  height: 250px;
  padding: 0;
  margin: 0;
  display: block;
}

#top-left {
  position: absolute;
  top: 0;
  left: 0;
}

#top-right {
  position: absolute; 
  top: 0;
  right: 0;
}

#bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

#bottom-right {
  position: absolute; 
  bottom: 0;
  right: 0;
}