CODEWITHSUNDEEP
css
Ondrej
Ondrej

Reputation: 1660

Stretch div inside a parent div with display: table-cell

I have a div inside a parent div. The parent div has display set to table-cell and does not have a fixed size.

I need the child div to stretch throughout the parent div, but I need the parent div to retain its size and not stretch itself.

This is my code (with inline CSS for simplicity):

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell; width: 600px;">Content</div>
  <div id="parent" style="display:table-cell;">
    <div id="child"></div> <!-- I need to stretch this across the entire parent -->
  </div>
</div>

This is basically what I'm trying to achieve: enter image description here

In other words: three divs in a line, the middle having a fixed size, the other ones stretching to the ends of the browser window. I need to be able to add content to the right div while making sure the right div doesn't resize as I add content into it.

Upvotes: 0

Views: 1051

Answers (2)

Steveo
Steveo

Reputation: 557

HTML:

<div class="browser-window">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS:

.browser-window {
  width: 100%;
  height: 100px;
  background-color: black;
  display: table;
}
.left, .middle, .right {
  display: table-cell;
  height: 100%;
}
.middle {
  width: 60px;
  background-color: green;
}

https://jsfiddle.net/6gzegpzx/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114989

Flexbox can do that.

.parent {
  display: flex;
  height: 200px;
}
.child {
  flex: 1;
  background: lightgrey;
}
.child.fixed {
  flex: 0 0 600px;
  background: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child fixed"></div>
  <div class="child"></div>
</div>

Or if you must use CSS Tables - Codepen Demo

.parent {
  display: table;
  height: 200px;
  width: 100%;
  table-layout: fixed;
}
.child {
  display: table-cell;
  background: lightgrey;
}
.child.fixed {
  width: 600px;
  background: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child fixed"></div>
  <div class="child"></div>
</div>

Upvotes: 2

Related Questions