-1

Wrapper

I already posted a question here in Arrange a few divs

The problem is that the div on the right side is increasing and the divs content3 and 4 are moving down, but the should stay right under content_1

here ist the code

body {
  margin: 0;
}

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

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

#content_1 {
  background: red;
  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>

Can someone help?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Teratek
  • 55
  • 7

1 Answers1

1

Maybe you need it to be responsive, so like this:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  height: 100vh;
  margin: 0 auto;
}

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

#content_1 {
  background: red;
  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>

And if you want to use fixed height for sections you need to add alignment property to the #wrapper in order to keep 3 & 4 always under 1:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  margin: 0 auto;
  width:600px;
  align-items: flex-start; /*added this*/
}

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

#content_1 {
  background: red;
  width: 100%;
  height:40px;
}

#content_2 {
  flex: 1;
  background: #aaa;
  height:40px;
}

#content_4 {
  flex: 1;
  background: #ddd;
  height:150px;
}

#content_3 {
  flex: 1;
  background: #eee;
  height:40px;
}
<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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for the answer. Now content_2 and 3 are moving up and down while increasing or decreasing the browser height. I need a fixed position under content_1 no matter how high content_4 is – Teratek Dec 31 '17 at 14:47
  • 1
    @Teratek which browser are you using ? it's seems to be fine for me – Temani Afif Dec 31 '17 at 14:55
  • Firefox 57.0.3. Inetexplorer is the same result. Maybe its because i have some other divs arround. When i set the height to 260px where you set it to 100vh it works but my content_2 div is now going through my footer div :) – Teratek Dec 31 '17 at 15:11
  • @Teratek can you then show me full code so i can see ;) and did you try the second solution ? – Temani Afif Dec 31 '17 at 15:14
  • 1
    I cant post the full code cause its too much. Second solution worked for me. Thanks :) – Teratek Dec 31 '17 at 15:21
  • @Teratek great, and yes the second is more suitable for you because of the alignment property ;) – Temani Afif Dec 31 '17 at 15:22