Home/ Questions/Q 570953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:27:22+00:00

I am trying to achieve an effect in HTML + CSS like this _____________________[

  • 0

I am trying to achieve an effect in HTML + CSS like this

_____________________[           Some Div             ]

The ____ is 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. I am trying to avoid any fixed spacing layout.

I tried using a table with width:100%:

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

The extra space goes to the second td instead of the first one. I 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0