Arrange A Few Divs

I have a few divs to arrange but im stuck. It should look like this Im working on it for a couple of hours and it wont get better. Here is the code i wrote so far. I thinks there

Solution 1:

I advice to go with flex, much easier :

You first divide the layout in 2 columns (div1,div2,div3 in the first and div4 in the second). Then in the first column you simply make the first div to be width:100% and use wrap to make the 2 remaining go to the next row.

body {
  margin: 0;
}

#wrapper {
  width: 600px;
  display: flex;
  height: 200px;
  margin: 0 auto;
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: #bbb;
  width: 100%;
}

#content_2 {
  flex: 1;
  background: #aaa;
}

#content_4 {
  flex: 1;
  background: #ddd;
}

#content_3 {
  flex: 1;
  background: #eee;
}

<divid="wrapper"><divclass="first"><divid="content_1">content_1</div><divid="content_2">content_2</div><divid="content_3">content_3</div></div><divid="content_4">content_4</div></div>