CODEWITHSUNDEEP
htmlcss
Adib Aroui
Adib Aroui

Reputation: 5067

Stretch an element of unknown width alongside elements of fixed width inside parent of unknown width

I have a parent div of unknown width (the width depend on some screen width calculations). The number of the child divs is 4 and are floated so that they are horizontally aligned. The 1st, 2nd and 4th are good candidates for fixed width value. However, the 3rd element can stretch to fit the remaining space in the parent div.

I don't know why the approach of display:table; for parent and display:table-cell for children didn't work for me. The three element's width is fixed except for the concerned div where I also tried width:auto to no avail.

<div class="parent">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
</div>

A minimal CSS:

.parent
{
  width: 100%;
  display:table;
}
.first
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.second
{
 width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.third
{

  height: 80px;
  float: left;
  display: table-cell;
}

.fourth
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

Your usual help is much appreciated.

Upvotes: 3

Views: 241

Answers (2)

dippas
dippas

Reputation: 60553

For IE9+

You can use inline-block and calc() for this.

Snippet

body {
 margin:0
}  
.parent {
  border:solid black;
  font-size:0; /*fix inline-block gap*/
}

.child {
  border: 1px solid red;
  margin: 5px;
  width:100px;
  display:inline-block;
  font-size:16px /*restore font -size*/
}

.calc{
  width: calc(100% - 348px)
}
<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child calc">three</div>
  <div class="child">four</div>
</div>

For IE8+

you can use display:table/table-cell

Snippet

body {
  margin: 0
}
.parent {
  border: solid black;
  display: table;
  table-layout: fixed;
  width: 100%;
  /*optional*/
  border-collapse:separate;
  border-spacing:5px;
  box-sizing:border-box;
}
.child {
  border: 1px solid red;
  width: 100px;
  display:table-cell;
}
.big {
  width:100%
}
<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child big">three</div>
  <div class="child">four</div>
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can do this with Flexbox, so if you add flex: 1 to one child div it will take rest of free width

.parent {
  display: flex;
  border: 1px solid black;
}

.child {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
  flex: 1;
}
<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

Or you can use CSS Table with table-layout: fixed here is Browser support

.parent {
  display: table;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

.child {
  border: 1px solid black;
  display: table-cell;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
 width: 100%;
}
<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

Upvotes: 2

Related Questions