Close the gap between divs in a grid layout

Question

Can I show div-3 below div-1 ?

.div-1{ float:left; width:50%; background:red; height:100px;}
.div-2{ float:left; width:50%; background:green; height:300px;}
.div-3{ float:left; width:50%; background:blue; height:200px;}

Screenshot of design:

Answer 1

You can.

.div-1{ float:left; width:50%; background:red; height:100px;}
.div-2{ float:right; width:50%; background:green; height:300px;}
.div-3{ float:left; width:50%; background:blue; height:200px;}

Answer 2

CSS Flexbox

section {
  display: flex;
  flex-flow: column wrap;
  height: 300px; /* necessary to force a wrap (value based on height of items) */
}

.div-1 {
  order: 1;
  height: 100px;
  width: 50%;
  background: red;
}

.div-2 {
  order: 3;
  height: 300px;
  width: 50%;
  background: green;
}

.div-3 {
  order: 2; /* remove from source order and display second */
  height: 200px;
  width: 50%;
  background: blue;
}

<section>
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</section>

Browser Support

Flexbox is supported by all major browsers, except IE < 10.

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

For a quick way to add prefixes use Autoprefixer.

More details in this answer.

---

CSS Grid

section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* distribute container space evenly between
                                     two columns */
 }

.div-1 {
  grid-area: 1 / 1 / 2 / 2;       /* see note below */
  height: 100px;
  background: red;
}

.div-2 {
  grid-area: 1 / 2 / 3 / 3;
  height: 300px;
  background: green;
}

.div-3 {
  grid-area: 2 / 1 / 3 / 2;
  height: 200px;
  background: blue;
}

<section>
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</section>

The grid-area shorthand property parses values in this order:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Note the counter-clockwise direction, which is the opposite of margin and padding.

Browser Support for CSS Grid

• Chrome - full support as of March 8, 2017 (version 57)
• Firefox - full support as of March 6, 2017 (version 52)
• Safari - full support as of March 26, 2017 (version 10.1)
• Edge - full support as of October 16, 2017 (version 16)
• IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

Answer 3

The Bootstrap way is to simply use pull-right on the 2nd DIV...

<section>
  <div class="div-1"></div>
  <div class="div-2 pull-right"></div>
  <div class="div-3"></div>
</section>

http://www.codeply.com/go/Cj0pAGoSxG