Home/ Questions/Q 8384413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T17:24:04+00:00

I want the pink and blue boxes to have the same height (400px), which

  • 0

I want the pink and blue boxes to have the same height (400px), which isn’t working in Opera only. The height get dragged by bottom padding, which looks like a bug to me. Could you anyone help?

Update 1 – Just checked it in IE8 and it doesn’t work either, so the prob is re-scope to IE + Opera.

Update 2 – padding-bottom changed to 50px to make issue clearer. The version of Opera I’m using is 11.62.

Html (watch pink and blue boxes height):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: wheat;">
                    <div style="display: table-cell; background-color: Green; padding-bottom: 50px; height: 100%;">
                        <div style="height: 100%; background-color: pink;">Inner</div>
                    </div>
                </div>
            </td>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: blue;">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Got it fixed by applying box-sizing: border-box.

    here’s the class:

    .bb
{
     box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}
    • 0