CODEWITHSUNDEEP
htmlcsslayout
user3607282
user3607282

Reputation: 2555

3 column layout, with responsive width for the middle column

So this is the layout I want to achieve for a row on a list,

enter image description here

The left column has a icon which will have a fixed size of 35px.

The middle column will have text. And the width of the column should increase/decrease depending on the screen size.

The last column also has text. This text should not break into a second line. The column should take the width of the content inside it.

So from what I understand, This is the HTML,

<div class="row">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</row>

and the CSS,

.row { width:100%; }

.col-1 { width:35px; }

.col-2 { width:80%; }

.col-3 { width:10%; }

This is not giving me the expected result. Can someone tell me how it's done.

Upvotes: 1

Views: 1886

Answers (2)

Paulie_D
Paulie_D

Reputation: 115373

Flexbox can take care of most of this.

The last column also has text. This text should not break into a second line. The column should take the width of the content inside it.

For this you need to add: white-space:no-wrap to the relevant div.

Note that this might cause issues at lower screen sizes.

JSfiddle Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row {
  display: flex;
  margin-bottom: 10px;
}
.col-1 {
  width: 35px;
  background: red;
}
.col-2 {
  flex: 1;
  background: blue;
}
.col-3 {
  background: green;
  white-space: nowrap;
}
<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet!</p>
  </div>
</div>

<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, similique!</p>
  </div>
</div>

Upvotes: 0

orgertot
orgertot

Reputation: 197

You could use flexbox

        <style>
.parent {
    display:flex;
    width: 100%;
}
.item {
    border: 1px solid #000;
    height: 100px;
}
.a {
    width: 85px;
}
.b {
    flex: 1 auto;
}
    </style>
<div class="parent">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c">rgfdgfdgfdgfdgfdgfdgfdg</div>
</div>

https://jsfiddle.net/bkqgzghb/1/

Upvotes: 2

Related Questions