Arrange a few divs

Question

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 is an easy solution for a pro.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

 
#wrapper {
width: 600px;
margin: 0 auto;
}
 
#content_3 {
float: left;
background: #bbb;
width: 200px;
}
 
#content_2 {
float: left;
width: 200px;
background: #aaa;
}
 
 
#content_4 {
float: right;
width: 200px;
background: #ddd;
}
 
#content_1 {
float:left;
width: 400px;
margin: 0 auto;
background: #eee;
}

</style>
 
</head>
<body>
 
<div id="wrapper">
<div>
  <div id="content_1">content_1</div>
     <div id="content_2">content_2</div>
     <div id="content_3">content_3</div>
</div>

     <div id="content_4">content_4</div>
</div>
 
</body>
</html>

Can someone help?

Wrapper

Both solution worked for me fine but the content of DIV 2 is increasing and so content 3 and 4 are moving down. How can i fix this? Conten_3 and 4 should stay right under content_1

Your doctype is one that should not be used for new web pages since 1999. Update that to the current one which is required: ` ` — Rob, Dec 30 '17 at 17:24
Possible duplicate of [Masonry layout with css3 flex](https://stackoverflow.com/questions/26435502/masonry-layout-with-css3-flex) [Search on SO](https://stackoverflow.com/search?q=masonry+layout) or Google for "masonry layout" and find a multitude of same answers. — Rob, Dec 30 '17 at 17:26

Temani Afif · Accepted Answer · 2017-12-16T22:25:25.597

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;
}

<div id="wrapper">
  <div class="first">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="content_4">content_4</div>
</div>

@Teratek i added more explanation to the answer ;) and i highly advice you to read more about flexbox layout and your life will be easier :) of course this is not the only way you will get more answer using float,inline-block, grid, etc ;) — Temani Afif, Dec 16 '17 at 22:27

score 3 · Answer 2 · 2017-12-31T13:53:05.150

Here's another alternative with CSS grid. Hope, it helps :)

We divide wrapper in 3 columns giving each column fraction 1. Then for each content we just mention the row and column and if we need to combine to rows or column we use span as shown.

Advantage: You don't need to worry about height and width, you can make use of fractions to divide them.

#wrapper {
  width: 600px;
  height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#wrapper * {
  text-align: center;
}

#content_1 {
  grid-column: 1 / span 2;
  background: red;
}

#content_2 {
  background: #aaa;
  grid-column: 3;
  grid-row: 1 / span 2;
}

#content_3 {
  background: #bbb;
  grid-column: 1;
  grid-row: 2;
}

#content_4 {
  grid-column: 2;
  grid-row: 2;
  background: #ddd;
}

<div id="wrapper">
  <div id="content_1">content_1</div>
  <div id="content_2">content_2</div>
  <div id="content_3">content_3</div>
  <div id="content_4">content_4</div>
</div>

Arrange a few divs

2 Answers2

Linked