Question

Consider the following example: (live demo)

HTML:

<div>
    <p>
        <strong>Stack</strong>
        <span>Overflow</span>
    </p>
</div>

CSS:

p {
    background-color: #aaa;
}
span {
    background-color: #777;
}

How could I make <span>‘s width to be all the available space?

Note: <strong> and <span> should be on the same line.

Answer 1

If you want the items on the same line with the full width taken up you could do this.

http://jsfiddle.net/Sohnee/Gfyjc/

p {
    background-color: #aaa;
}

strong {
    float: left;    
}

span {
    display: block;
    background-color: #777;
    margin-left: 40px;
}

But a better alternative would be to get the background-color run from the parent element.