CODEWITHSUNDEEP
htmlcss
lebhero
lebhero

Reputation: 1441

display 4 columns next to each other and among each other when resizing

i have the following issue: i am trying to display 4 Columns in 1 row of information next to each other. now, this works fine, but when i resize the page, the columns are not breaking to display on a new row. so how would i change it to make it possible for the columns to display among one another ? thanks in advance.

.Row {
  display: table;
  width: 100%;
  table-layout: auto;
  border-spacing: 20px;
}
.Column {
  display: table-cell;
  font-size: 16px;
}
<div class="Row">
  <div class="Column">
    TEST 1
  </div>

  <div class="Column">
    TEST 2
  </div>

  <div class="Column">
    TEST 3
  </div>

  <div class="Column">
    TEST 4
  </div>
</div>

Upvotes: 0

Views: 445

Answers (1)

James M
James M

Reputation: 239

So tables are not the way to go when thinking responsive. using floats or media queries would be the way to tackle it. check out tutorials for the box model.

.Row {
  width: 100%;
  border-spacing: 20px;
}
.Column {
    font-size: 16px;
    float: left;
    padding: 0 100px;
}

play with padding and margins to place them where you want

Upvotes: 1

Related Questions