CODEWITHSUNDEEP
htmlcss
ryyst
ryyst

Reputation: 9781

Two divs side by side: first fixed-width, second stretch-to-fit

I would like to create a layout where I have two divs side-by-side. The first div should be as wide as its content requires it to be. The second div should stretch to fill up the remaining space. The markup will look something like this:

<div id="d1">
    <div id="d2">fixed width</div>
    <div id="d3">stretching</div>
</div>

The problem is that either both divs are just as wide as their content and do not stretch to fill the entire horizontal space, or that (e.g. when using display: table on d1 and display: table-cell on d2 and d3) both divs stretch.

How can I fix the width of d2 and stretch d3 to fill up the remaining space? Note that the width of d2 is not known, so I cannot specify it in pixels.

Upvotes: 2

Views: 4219

Answers (1)

Byscripts
Byscripts

Reputation: 2588

I think that should do it :

#d1 {
  display: table;
  width: 100%;
}

#d2, #d3 {
  display: table-cell;
  padding: 2px 6px;
}

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

You can try it here

Upvotes: 5

Related Questions