CODEWITHSUNDEEP
htmlcssflexbox
Patrickkx
Patrickkx

Reputation: 1870

Properly position divs in CSS

I have following divs structure:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}
<div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

But when theres not enough space, I would this to change into:

enter image description here

I tried with flex but it always push E div after D div. Looking for some help

Upvotes: 0

Views: 88

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

order is also a solution since it is a flex layout

from earlier comment:

Try .b{ order:2;} to set D in last position.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
  /* maybe useful here too */
  justify-content: center;
  margin:auto;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media screen and (max-width:600px) {
  .b {
    order: 2;
  }
}
<div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

My example has a media query. To achieve the desired result, you need to add order 2 rule and stretch by flex: 100% for class b, and divide the blocks of class a into two columns using the flex: 50% rule.

Was it necessary?

.wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media(max-width: 615px){
  .b {
    order: 2;
    flex: 100%;
}

  .a {
    flex: 50%;
  }
}
<div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

This is another solution with a minimal media query, but you need to add the max-width: 50% rule to class a;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  max-width: 50%;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media(max-width: 615px){
  .b {
    order: 2;
}
}
<div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

Upvotes: 1

M Usman
M Usman

Reputation: 61

Do something like this:

.fbox{
    float: left;
    width:50%;
    height:100px;
}

.box-a{
    background-color: red;
    text-align: center;
    color: #ffffff;
}

.box-b{
    background-color: green;
    text-align: center;
    color: #ffffff;
}

.sbox{
    float: left;
    width:50%;
    height:100px;
}

.box-c{
    background-color: blue;
    text-align: center;
    color: #ffffff;
}

.box-d{
    background-color: gray;
    text-align: center;
    color: #ffffff;
}

#third-one{
    height:100px;
    width:100%;
    text-align: center;
}
<div class="boxes">
       <div class="first-two">
           <div class="fbox box-a">
                 a
           </div>
           <div class="fbox box-b">
                 b
           </div>
       </div>
       <div class="second-two">
           <div class="sbox box-c">
                 c
           </div>
           <div class="sbox box-d">
                 d
           </div>
       </div>
</div>
<div id="third-one">
           e
</div>

Upvotes: 1

Related Questions