I\'m trying to have something like this:
|--------------fixed width---------------| Title1 .......................... value1 Title2 ................... another valu
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
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/
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>