CSS IE6 case - inner div doesn't fit in 100%

StackOverflow https://stackoverflow.com/questions/12922218

  •  07-07-2021
  •  | 
  •  

Question

I have one big container (div) and one header div inside of it. It should fit the container in 100% of its width. And it does, everywhere instead of IE6 (it does even in IE7).

HTML code:

<body>
   <header>
      <table summary="Displaying something">
         <tr class="first-row">
            <th>Fdsfdsf:</th>
            <td>fdjsklf</td>
         </tr>
         <tr>
            <th>dfdsfdsf:</th>
            <td>vcxvcx</td>
         </tr>
         <tr>
            <th>FDSfjdsklf</th>
            <td>FDsjfkdsj</td>
         </tr>
      </table>
   </header>
</body>

And CSS:

* {
    margin:                 0;
    padding:                0;
}
html {
    font:                   62.5% verdana, geneva, sans-serif;
    line-height:            1.125em;
    background-color:       silver;
    text-align:             center;
}
body {
    background-color:       white;
    width:                  79%;
    min-width:              1024px;
    max-width:              1920px;
    margin:                 3% auto;
    text-align:             left;
}
header {
    padding:                1em;
    border-bottom:          1px solid silver;
    text-align:             center;
}
header table {
    margin:                 0 auto;
}
header table tr {
    font-size:              0.8em;
}
header table .first-row {
    font-size:              1em;
}
header table th {
    font-weight:            normal;
    padding:                0 10px 0 0;
    text-align:             right;
}
header table .first-row th {
    font-weight:            bold;       
}
header table .first-row td, header table .first-row th {
    border-bottom:          1px dotted silver;
}

Sorry for the length of the code. To check the header size I added bottom margin. It fits the left side of the outer container perfectly. And as the header doesn't have width set in the file it should fit the outer div also to the right. However there exist a gap on the right side. The end of the border is a little bit (about 20px) distanced from the right side, so it's too short.

Can you see the problem? I tried everything, the only thing that works is setting width: 100% in the header. However because of the padding it is too long in other browsers...

Was it helpful?

Solution

If adding 100% to the header works, you can use:

header {
    padding:                1em;
    border-bottom:          1px solid silver;
    text-align:             center;
    width:                  100%;
    box-sizing:             border-box; /* that's the magic */
}

Padding will be included in the total lenght in later browsers thanks to the power of box-sizing.

As they're already pointing out in the comments, unless you live in China you can probably ignore IE7 and below.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top