CODEWITHSUNDEEP
htmlcss
Nikolai Kim
Nikolai Kim

Reputation: 705

Make DIV to fill table cell

I'd like a DIV inside table cell fit all available space wide.

enter image description here

There are two DIVs in green cell: first one has margin-left: 40px and second Pencil have width 100%. I want latter DIV to take free space like this:

enter image description here

I think that problem is that 100% of width for Pencil's block is actually it's parent width, i.e. green cell. As there's also left yellow box with some width and margin, content of the cell is overflowed and splitted into two "rows". Unfortunately,

I can't find a way to acheive desired layout with CSS only without JavaScript. Is it possible at all?

Let me share a live example to play with: JS Bin. Thank you in advance!

Upvotes: 1

Views: 459

Answers (3)

Asons
Asons

Reputation: 87191

If you set the div.title like this it will work

width: calc(100% - 50px); // This one

Adjust the "50px" to be more accurate to the space the div.handler occupy.

Update based on comment about supporting IE8

By changing to this in your JSBin, it works

.left {
  .border(green);
  width: @width-left;
  overflow: hidden;

  & > * {
  }

  .handler {
    .border(magenta);
    background-color: yellow;
    width: 20px;
    float: left;
  }

  .title {
    .border(red);
    overflow: hidden;
  }

}

Sample snippet

.table {
  border: 1px dotted grey;
  display: table;
  width: 80%;
  box-sizing: border-box;
}
.table .row {
  display: table-row;
}
.table .row > * {
  display: table-cell;
}
.table .row .left {
  border: 1px dotted green;
  width: 40%;
  overflow: hidden;
}
.table .row .left .handler {
  border: 1px dotted magenta;
  background-color: yellow;
  width: 20px;
  float: left;
}
.table .row .left .title {
  border: 1px dotted red;
  overflow: hidden;
}
.table .row .right {
  border: 1px dotted blue;
  width: 60%;
}
.table .row .right > * {
  display: inline-block;
}
.table .offset {
  margin-left: 40px;
}
<div class="table">
  <div class="row">
    <div class="left">
      <div class="handler offset">[+]</div>
      <div class="title">Pencil</div>
    </div>
    <div class="right">
      <div class="price">$0.60</div>
      <div class="quantity">14 PCS</div>
      <div class="total">$8.40</div>
    </div>
  </div>
</div>

Upvotes: 2

Dave Draper
Dave Draper

Reputation: 1845

This answer really depends on how you want text overflow to be handled - but if you just change .title to have display:inline (rather than inline-block) then it seems to render as you want. However, this might not be the desired result when you have text in the cell much longer than the word "Pencil".

Upvotes: 0

Qwertiy
Qwertiy

Reputation: 21400

.table .row .left .handler,
.table .row .left .title {
  display: table-cell;
}

Upvotes: 0

Related Questions