Home/ Questions/Q 7541059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T07:47:47+00:00

Here’s a basic illustration of the problem: <html><head><style type=text/css> html {width: 100%; height: 100%;

  • 0

Here’s a basic illustration of the problem:

<html><head><style type="text/css">
    html {width: 100%; height: 100%; background: red;}
    body {width: 100%; height: 100%; background: green;}
    
    .leftbar, .rightbar {height: 100%; background: blue;}

    .leftbar  {float: left;}
    .rightbar {float: right;}

    table {width: 100px; height: 800px; background: black; color: white;
           margin: 0 auto 0 auto;}
</style></head>
<body>
    <ul class="leftbar"><li>one</li><li>two</li></ul>
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul>
    <table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>​

We can immediately see that the floated ul elements are as tall as the body which contains them, the problem is that the body is not as tall as the table which it contains.

How do I make the body be big enough? In this example, I want the leftbar and rightbar to go all the way down, as far as scrolling allows, so you can never see any gap below them.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use tables. They’re impure but they work.

    The div-based solutions involve unacceptable compromises (absolute dimensions, loss of float).

    • 0