Extending Border of an Element to Full Width of Container (No Display Block)

Question

I am generating a PDF form from scratch using ColdFusion. CF can generate a PDF from HTML. So, I'm attempting to create a form that looks something like this... With under line under the entire space between label 1 (which actually ends after the colon) and the edge of the container (in this case, the body tag). Is there any way that I can do this using the CSS Border attribute, or is it possible to use the Background attribute with a custom background repeating (this is another way I've seen this done)?

|header     pg|
|    title    |
|             |
|lbl1:_val1___|

Simply not sure the best way to approach this, and I imagine there must be an easy way...

Front-End Guys? :)

EDIT: JSFiddle illustrating Issue Here... http://jsfiddle.net/JESw5/

Thanks,

Taylor

Answer 1

I assume you are using an inline-block element because you have tagged your question with it. All inline-block elements can be sized to fit their container with the following:

width: 100%;

That's it!

Add a border to the bottom and you're good to go:

border-bottom: 1px solid black;

JSFiddle