0

In row1 I have 4 columns(filled) and in the row2 I want my 2nd column to be empty and take space, but 3rd column moves left and occupies the 2nd column. I don't want to use tables and &nbsp.

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}
<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Improve this question

2 Answers 2

Reset to default
2

You can set an offset, but if you still want that empty col in you DOM, then you can do a simple hack by inserting a empty space &nbsp;.

You can use bootstrap's class col-md-offset-3 assigned to the third column if you don't want to use the empty space hack.

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}
<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3">&nbsp;</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Here is another example by using .col-md-offset-3 class custom defined. 

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

.col-md-offset-3 {
  margin-left: 25.98%; /* combined margin = default margin (4%) + col width (21.98%) */
}
<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3 col-md-offset-3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Improve this answer
4
  • I guess I answer it first :)
    – Kristijan Iliev
    Commented May 22, 2017 at 10:35
  • Yes, first at the photo finish :)
    – Paolo Forgia
    Commented May 22, 2017 at 10:42
  • &nbsp takes some empty text in the empty space. Use CTRL+A in your output page it will be in blue highlighted.
    – Nawaz Ghori
    Commented May 22, 2017 at 11:22
  • bootstrap doesn't use gutter spaces. Here i'm using 4% of gutter space in between each column
    – Nawaz Ghori
    Commented May 22, 2017 at 11:22
0

This happens as there is no content to occupy space, so you can add a min-height value with smallest unit you want to add (pixel being the smallest unit on screen), like I have added a min-height:1px. It keeps my layout flow proper.

.col {
  margin-right: 4%;
  float: left;
  min-height: 1px;
  /* give a small space - practiced by Bootstrap framework as well */
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}
<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Improve this answer
2
  • min-height takes some empty text in the empty space. Use CTRL+A in your output page it will be in blue highlighted.
    – Nawaz Ghori
    Commented May 22, 2017 at 11:08
  • it is a widely used practice, you can check the And if you don't want then go for &nbsp; approach. But then you'll have to write it everytime in similar scenario you use your grid system. And it does not appear in browser when pressed CTRL+A.
    – Deepak Yadav
    Commented May 22, 2017 at 11:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.