Home/ Questions/Q 7175213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:14:18+00:00

I’ve run into what appears to be a CSS issue with IE8. <html> <body>

  • 0

I’ve run into what appears to be a CSS issue with IE8.

  <html>
    <body>
      <div style="width:180px;">
        <div style="text-align:center; border:1px solid black;">
          <div style="width: 40%; background-color:red;">
            <div style="width:180px; float:left;">
              <div>Text</div>
            </div>
            <div style="clear: both"></div>
          </div>
        </div>
      </div>
    </body>
  </html>

This gives me the following results:

enter image description here

The doctype is set to strict. The reason the text divs are in a div that can have a width of anywhere from 0-100% is to give that variable width div the proper height.

What do I need to do in order to achieve the first effect in IE8?

Some key elements to this are that the height cannot be fixed because the text could overflow the width of the box. The height of both the containing box and the “fill” needs to be able to vary based on content.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This solves the issue of a variable height:

    HTML:

    <div class="wrapper">
   <div class="bar"></div>
   <div class="text">Text<br/>MoreText</div>    
 </div>

    CSS:

    .wrapper {
    width: 180px;
    text-align: center;
    border: 1px solid black;
    position:relative;
}

.text {
    position:relative;
}

.bar {
    width: 40%;
    background-color: red;
    position: absolute;
    top:0; 
    bottom:0;
}

    Demo

    • 0