Getting a span element fill the space in a div

Question

I\'m trying to have something like this:

|--------------fixed width---------------|
 Title1 .......................... value1
 Title2 ................... another valu         


        

Answer 1

If you reorder your HTML, you can get a simple solution:

  Title
  value
   

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/