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


Tags: css,width,html

Problem :

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?



Solution :

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.


    CSS Howto..

    How to get the table (datatable) left aligned?

    How to use the word-wrap property in CSS 2.1 and validate CSS

    How to align div in body to stay with specific height and width

    How to target images with dynamically generated ids with CSS

    How to start developing Android application with HTML5, CSS, JavaScript and jquery? [closed]

    How to add static files using Spring MVC and Thymeleaf

    How can I memorize all CSS shorthands?

    How to make .less files to have .css syntax highlight in Vim?

    CSS preprocessors workflow - how does it really work?

    Greasemonkey: How to do something when style=“display: none;” changes?

    How to create a image frame by css?

    How can I select every other element that does not have a specific class?

    How to safely display user's text containing all html/css in rails 3

    CSS animation - How to fill in “starting from border”?

    How do I add a horizontal scrollbar to a table in a div?

    How to make expand-collapse different div heights according to device width using css/javascript

    How dynamically aligning text on website

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How to style this with css? [closed]

    How to insert line breaks between numbers and content in ordered list

    How to center a DIV with CSS?

    how to apply ellipse effect in which contain space in string?

    how to apply two classes of css on same element?

    Rails: Stylesheet/view issue? Nothing is showing on the screen although there is source code when viewed in browser

    How to get a child element to size according to parent's min-height?

    CSS slide page up animation- element briefly shows before the animation

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to make divs appear and disapear on hover in css?

    how to let dropdown menu align-right?

    How to link a table cell?