Home/ Questions/Q 986585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:20:32+00:00

I have the following HTML. <body> <div class=header></div> <div class=navdiv></div> <div class=mainarea> <p></p> <table>

  • 0

I have the following HTML.

<body>

<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>

</body>

I need some help with the CSS to structure the page correctly.

I want the header to be 100% across the top which I can do.

But I want the “navdiv” to be a fixed 250px on the left of the page.
Then with the “mainarea” div taking the rest of the page to the right of the navdiv.
I then also want the table to stretch across the rest of the page.

I have tried several variations and some work however I can’t get the table to stretch across the rest of the space, it just either jumps below the nav, goes too far past the other content or only sizes to the content within it.

Can anyone help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work:

    .header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none;  }

    Explanation:

    I’m essentially using the standard two-column overflow: hidden trick to force the main content to stay in its own column (as opposed to wrapping under the nav). position: relative on the main content is to set it as the table’s offset parent, so we can use width: 100% on the table to push it to the width of the main area.

    The height on the nav, the background color, and borders are for demonstration purposes only.

    On the hacks:

    No other (modern) browser requires margin-left: 260px, as that is covered by the overflow: hidden (forcing it into two columns).

    Still, at that point, the table seems to clear to the bottom of the nav (again, only in IE6). This is solved by removing any default clear (not sure that’s necessary), and floating it to the right, so it doesn’t take into account the size of the nav.

    • 0