Home/ Questions/Q 3950072
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T01:34:08+00:00

I have the following HTML <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Table-cell issue</title>

  • 0

I have the following HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
    <title>Table-cell issue</title>
    <style type="text/css">
        html, body { height: 100%; }
        .table
        {
            display: table;
            height: 100%;
        }
        .row
        {
            display: table-row;
        }
        .aside
        {
            display: table-cell;        
        }
        .center
        {
            background-color: red;
            display: table-cell;
            width: 100%;
        }
        .wide
        {
            background-color: green;
            width: 16000px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
        <div class="aside">
            Left column
        </div>
        <div class="center">
            <div class="wide">&nbsp;</div>
        </div>
        <div class="aside">
            Right column
        </div>
        </div>
    </div>
</body>
</html>

The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center’s content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.

I would be very grateful for any idea on how to fix the issue.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.

    • 0