CODEWITHSUNDEEP
htmlcss
user9658546
user9658546

Reputation:

How to design four column layout using css only when column widths will be variable?

I want a four column layout using CSS only where the width of the columns will act responsively. To understand my problem at first please look at below code:

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
  width: 25%;
}

.col1 {
  background-color: #89ffa2;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
}
<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

In the code above, the width is given as 25%, so it will act responsively as equal width for all the columns. But I don't want this 25%. What I want to achieve is, as column 1 and column 4 is pretty smaller in this case, so column 1 and column 4 will be in the size of their content's width. But as all other columns are beyond the 25% size they will take equal width. Also, the height of all 4 columns will be equal to the height of the column having maximum height. And I want this to be responsive, like when screen size will be smaller, then at some points all 4 columns will have to be in same width. And the column 1 and column 4 is dummy in this case. I want it to be dynamic because which column's content will be greater and which one will be smaller that is not known.

I want it to be like this:

enter image description here

And when the screen will be resized it may then become like this:

enter image description here

Is this possible with only CSS? Maybe, I could make myself clear.

Upvotes: 0

Views: 683

Answers (4)

Johannes
Johannes

Reputation: 67799

You can just erase the width, then the cell widths will adjust according to their contents.

And if you want the text in column 1 and 4 not to break, you can add white-space: no-wrap to them

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
}

.col1 {
  background-color: #89ffa2;
  white-space: nowrap;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
  white-space: nowrap;
}
<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13417

.row {
  width: 100%;
  display: table;
}

.col {
  display: table-cell;
}

.col1 {
  background-color: #89ffa2;
  width: 15%;
}

.col2 {
  background-color: #b2f0f9;
  width: 35%;
}

.col3 {
  background-color: #ffa7a7;
  width: 35%;
}

.col4 {
  background-color: #fff689;
  width: 15%;
}

@media screen and (max-width: 768px) {
   .col {
      display: table-cell;
      width: 25%;
    }
}
<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274355

Use max-width with flexbox. Here is an example:

.row {
  width: 100%;
  display: flex;
}
.row > .col {
  max-width:25%;
}

.col1 {
  background-color: #89ffa2;
}

.col2 {
  background-color: #b2f0f9;
}

.col3 {
  background-color: #ffa7a7;
}

.col4 {
  background-color: #fff689;
}
<div class="row">
  <div class="col col1">
    This is column 1
  </div>

  <div class="col col2">
    This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.
  </div>

  <div class="col col3">
    This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.
  </div>

  <div class="col col4">
    This is column 4.
  </div>
</div>

Upvotes: 0

NoOorZ24
NoOorZ24

Reputation: 3277

There is a good old HTML element called <table>

you can create table with one row and 4 columns, give it 100% width.

Now format it as your hearth likes and it will automatically adjust width for cells with more text in them.

I guess flexbox is another solution but table will be supported in all browsers

Upvotes: 1

Related Questions