CSS - 3 divs float

Question

I have a div container:

div {
   width: 100%;
   height: 300px;
   display: inline-block;
}

In this div I want to align 3 images like this:

-.-.-.-.-.-.-.-   -.-.-.-.-.-.-.-
|             |   |             |
|             |   |      2      |
|             |   -.-.-.-.-.-.-.-
|      1      |   -.-.-.-.-.-.-.-
|             |   |             |
|             |   |      3      |
-.-.-.-.-.-.-.-   -.-.-.-.-.-.-.-

I use for this:

.photo-grid-3 .photo-grid-item:nth-child(1) {
    width: calc(50% - 5px);
    height: 250px; float: left;
}

.photo-grid-3 .photo-grid-item:nth-child(2) {
    width: 50%;
    height: 120px;
    margin: 0 0 5px 5px; float: left;
}

.photo-grid-3 .photo-grid-item:nth-child(2) {
    width: 50%;
    height: 125px;
    margin: 0 0 0 5px; 
}

But everything I get is:

-.-.-.-.-.-.-.-   -.-.-.-.-.-.-.-
|             |   |             |
|             |   |      2      |
|             |   -.-.-.-.-.-.-.-
|      1      |  
|             |                
|             |               
-.-.-.-.-.-.-.-   

There is no 3th div.

Answer 1

You just had a typo in your CSS:

div {
  width: 100%;
  height: 300px;
  display: inline-block;
}

.photo-grid-3 .photo-grid-item:nth-child(1) {
  width: calc(50% - 5px);
  height: 250px;
  float: left;
}

.photo-grid-3 .photo-grid-item:nth-child(2) {
  width: 50%;
  height: 120px;
  margin: 0 0 5px 5px;
  float: left;
}

.photo-grid-3 .photo-grid-item:nth-child(3) { /* here was the typo */
  width: 50%;
  height: 125px;
  margin: 0 0 0 5px;
}

<div class="photo-grid-3">
  <img src="http://lorempixel.com/400/200/" class="photo-grid-item">
  <img src="http://lorempixel.com/200/120/" class="photo-grid-item">
  <img src="http://lorempixel.com/200/125/" class="photo-grid-item">
</div>

Answer 2

I'd suggest you to use flex layout:

.main {
  min-height: 100vh;
  display: flex;
  color: white;
  text-align: center;
}
.blue {
  margin-right:5px;
  background: blue;
  flex: 1;
}
.sub {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
  margin-bottom:5px;
}
.green {
  background: green;
  flex: 1;
  }

<div class="main">
	<div class="blue"> Put Image One here</div>
  <div class="sub">
	  <div class="red"> Image 2 here</div>
	  <div class="green">Image 3 here</div>
	</div>
</div>

Answer 3

Without box-sizing: border box your margins will always break your layout. And you first have to sort out the half width containers, then do the two 1/4 sized/stacked containers in the right hand half.

I leave it to you to sort how it will break down responsively, but this works:

* {
box-sizing: border-box;
}

.one-half {
width: 50%;
float: left;
border: 1px solid red;
height: 200px;
}

.one-half-vertical {
height: 100px;
border: 1px solid blue;
}

<div class="one-half">
1
</div>
<div class="one-half">
<div class="one-half-vertical"></div>
<div class="one-half-vertical"></div>
</div>