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">
  <span class="rowLeft">LEFT</span>
  <span class="rowCentre">CENTER</span>
  <span class="rowRight">RIGHT</span>
</div>

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?

Answer 1

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.