Home/ Questions/Q 5990509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:15:15+00:00

I’m learning CSS and finding that it’s not always so intuitive (welcome to webdev,

  • 0

I’m learning CSS and finding that it’s not always so intuitive (welcome to webdev, I guess). 🙂

In an attempt to make a simple, static progress bar, I use the HTML file below:

<html>
  <head></head>
  <body>
    <table border='1' cellspacing='0'>
      <tr>
        <td>Sample Cell</td>
        <td>
          <!-- This is meant to be a progress bar -->
          <div style="background-color: #0a0; width: 20%;">
            <div style="text-align: center; width: 300px;">
              Text Here!
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

and I get this:

Progress Bar

which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change width: 300px to width: 100%, the text instead goes into the green box, rather than the whole table cell.

How can I “fill” the table cell with the text, without imposing a specific length restriction?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By placing your text div inside (as a child of) your colored div, you’re telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.

    EDIT: added code
    *EDIT: updated code*

    <html>
<head>
    <style>
        #bar{
            width: 100%;
            position: relative;
        }

        #progress{
            background-color: #0a0;
            width: 20%;
            position: absolute;
            z-index: 0;
        }

        #progress_text{
            text-align: center;
            width: 100%;
            position: relative;
            z-index:1;
        }
        .progress_cell{

        }

    </style>
  </head>
  <body>
    <table border='1' cellspacing='0'>
      <tr>
        <td>Sample Cell</td>
        <td class="progress_cell">
          <div id="bar">
             <!-- This is meant to be a progress bar -->
             <div id="progress">
               &nbsp;
             </div>
             <div id="progress_text">
                  Text Here! Text Here! But it's really long, and it's going to overflow ...
             </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
    • 0