Getting a span element fill the space in a div - html

Question

I'm trying to have something like this:
|--------------fixed width---------------|
Title1 .......................... value1
Title2 ................... another value
Another title ........ yet another value
Here is my html example code:
<div class="container">
<span class="left">Title</span>
<span class="center"> </span>
<span class="right">value</span>
</div>
And here my css:
.center {
text-align: center;
border-bottom: 1px dotted blue;
display: inline-block;
outerWidth: 100%;
}
.right {
display: block;
border: 1px dotted red;
float: right;
}
.left {
display: block;
text-align: right;
border: 1px dotted red;
margin-right: 0px;
float: left;
}
.container {
width: 200px;
border: 1px dotted red;
padding: 5px;
}
It's possible to make span "center" expand to fill the space between the other two span elements?
Code on jsfiddle: http://jsfiddle.net/XqHPh/
Thank you!

Answer 1

If you reorder your HTML, you can get a simple solution:
<div class="container">
<span class="left">Title</span>
<span class="right">value</span>
<span class="center"> </span>
</div>
Place the two floated elements ahead of the .center element. The .center element will be in regular content flow and wrap around the left and right content.
The CSS:
.center {
display: block;
border-bottom: 1px dotted blue;
overflow: auto;
position: relative;
top: -4px;
}
.right {
float: right;
margin-left: 10px;
}
.left {
float: left;
margin-right: 10px;
}
.container {
width: 200px;
border: 1px dotted red;
padding: 5px;
}
When you float an element, the display type computes to block, so no need to declare it.
Also, for .center, if you add overflow: auto, you constrain the block so it does not extend beyond the edges of the floated elements. As a result, your bottom border does not underline the title and value text.
Finally, you can add position: relative and move the .center up a few pixels to align the border closer to the baseline of the text.
Fiddle: http://jsfiddle.net/audetwebdesign/DPFYD/

Answer 2

for this you need to change the html structure like this
html
<div class="container">
<span class="left">Title</span>
<span class="right">value</span>
<span class="center"> </span>
</div>
and here is the css for .center span
.center {
text-align: center;
border-bottom: 1px dotted blue;
display:block;
}
jsFiddle File

Answer 3

Meanwhile Flexbox has full browser support, which allows for a more elegant solution without the center element.
.left, .right {
border: 1px dotted red;
}
.container {
display: flex;
justify-content: space-between;
width: 200px;
border: 1px dotted red;
padding: 5px;
}
<div class="container">
<span class="left">Title</span>
<span class="right">value</span>
</div>