Title: How can I make a span stretch the available space between to other spans?
Tags: css;width;html
Question: I want to create an element that consists of three spans within a div. The three spans shall use the whole width provided by the div. The left and right span have a fixed width and the centre one should use the whole available space between them. I've been trying many different things (float, overflow, etc.) but I haven't found an answer yet and I'm running out of ideas...

The code is rather simple:

```<div class="row"&gt;
  <span class="rowLeft"&gt;LEFT</span&gt;
  <span class="rowCentre"&gt;CENTER</span&gt;
  <span class="rowRight"&gt;RIGHT</span&gt;
</div&gt;
```

using the following CSS:

```.row {
  display: block;
  height: 62px;
  border: 1px dotted black;
}
.rowLeft {
  float: left;
  width: 40px;
  height: 60px;
  border: 1px solid red;
}
.rowCentre {
  float: left;
  height: 60px;
  border: 1px dashed blue;
}
.rowRight {
  float: right;
  width: 60px;
  height: 60px;
  border: 1px solid green;
}
```

I've created a jsFiddle for this: http://jsfiddle.net/ezAdf/

Question: Starting from here, how can I make the centre span stretch the available space between left and right span? 

Comment: Search for fluid layout with fixed sidebars

Comment: Thanks, that is at least a good starting point.

Here is the accepted answer: Kinda like @j08691's solution, with some changes. (Works in 4 browsers though.)
I removed the floats, added ```display: table-cell``` to span and ```display: table``` plus ```width: 100%``` to .row

Working fiddle here.


Here is another answer: You can use the ```display:table-cell``` CSS property on each span, and then set the width on the center span to 100%.

jsFiddle example

```.row {
  display: block;
  height: 100px;
  border: 1px dotted black;
}
.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red;
  display:table-cell;
}
.rowCentre {
  height: 60px;
  border: 1px dashed blue;
  display:table-cell;
  width:100%;

}
.rowRight {
  width: 60px;
  height: 60px;
  border: 1px solid green;
  display:table-cell;
}
```

Comment for this answer: Thanks, but this solution breaks the defintion of the cell width. Try to set e.g. the width of .rowRight to 100px and you'll see that the width does not change.
Comment for this answer: Thanks for your answer, but the your fiddle clearly shows that the _width_ of the cells is still not correct.

Here is another answer: Just make the following changes to your CSS file:

```.row {
  display: block;
  height: 62px;
  border: 1px dotted black;   
  position: relative;
}

.rowLeft {
  width: 40px;
  height: 60px;
  border: 1px solid red; 
  float: left;
}

.rowCentre{
  position: absolute;
  left: 40px;
  right: 60px;
  height: 60px;
  border: 1px dashed blue;  
  float: left;
}

.rowRight{
  width: 60px;
  height: 60px;
  border: 1px solid green;  
  float: right;
}
```

Comment for this answer: Thanks, but this doesn't really help me because of the absolute position of the centre span. I want to create these elements dynamically, so the positions are not known upfront.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:01/05/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><width><html>', 'Title': 'How can I make a span stretch the available space between to other spans?', 'ViewCount': 3670, 'id': 14175341, 'user_AboutMe': None, 'user_AccountId': 98727.0, 'user_DisplayName': 'Andreas', 'user_Reputation': 844.0, 'user_Views': 29.0, 'user_id': 267065.0}}