CODEWITHSUNDEEP
csswidthhtml
Andreas
Andreas

Reputation: 854

How can I make a span stretch the available space between to other spans?

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?

Upvotes: 0

Views: 4248

Answers (3)

sudee
sudee

Reputation: 783

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.

Upvotes: 1

Gaurang
Gaurang

Reputation: 1401

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;
}

Upvotes: 0

j08691
j08691

Reputation: 207901

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;
}

Upvotes: 1

Related Questions