HTML: How to stretch an empty element horizontally

Question

I am trying to achieve a simple effect in HTML + CSS. Something like this

_____________________[           Some Div             ]

Forgive the poor ASCII art. The ____ is to depict a border-bottom. The Div to the right of it shouldn't have the border.

I want this border to stretch as much as possible, so that together they occupy the width of the parent. But for the life of me I can't figure out how.

I have tried:

Using a table with width:100%. The extra space goes to the second td instead of the first one

<table style="width:100%"><tbody><tr>
    <td id="borderDiv"></td>
    <td id="contentDiv">Some Div</td>
</tr><?tbody></table>

I have also tried floating the content div to the right:

<div>
    <div id="contentDiv" style="float:right">Some Div</div>
    <div id="borderDiv"></div>
</div>

But the div with the border now fills up the entire space of the parent. Couldn't figure out a way to constraint it to the leftover space.

I am trying to avoid any fixed spacing layout.

Answer 1

Maybe I'm misunderstanding your question and I know the HTML + CSS purists are going to hate me for this but can't you do the following:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td><nobr>my content</nobr></td>
  </tr>
</table>

If the second column has a specific width that you want you can specify that and remove the <nobr> tags and end up with something like:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td style="width: 200px">my content</td>
  </tr>
</table>

Answer 2

<div>
     <div id="contentDiv" style="float:right; width:30%">Some Div</div>
     <div id="borderDiv" style="margin-right: 30%"></div>
</div>

Floats are required to have a width so that's how I'd approach it.

This might work, but need more info about how you are dealing with the height. If it's fixed for example just make the float a bit taller.

<div>
     <div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
     <div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>

Answer 3

The purist alternative to Brian's solution, using CSS properties:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td style="white-space:nowrap">my content</td>
  </tr>
</table>