Home/ Questions/Q 7619179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:37:05+00:00

Basically the container is to have a width of 100% (i.e. it will fill

  • 0

Basically the container is to have a width of 100% (i.e. it will fill the whole of the page) and it will have two columns:

  • column 1 is the nav bar and should remain a fixed width, e.g. 200px
  • column 2 is the content area and should have no specific width – it should just fill the remaining area and adjust according to screen/window sizes

What is the best way to accomplish this?

XHTML:

<body>
    <div id="container">
        <div id="navbar">
          &nbsp;
        </div>

        <div id="content">
          &nbsp;
        </div>
    </div>
</body>

CSS:

#container { float: left; width: 100%; }
#navbar { float: left; width: 200px; height: 800px; }
#content { float: left; height: 800px; ??? }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way I would do it is to set a minimum width on the container and content divs, with a left margin on the content div that allows it to slide next to the nav div. The left margin plus the minimum width should equal the minimum width of the container. I’ve added border so you can see that it sizes correctly.

    #container
{
    width: 100%;
    min-width: 960px;
}

#nav
{
    float: left;
    width: 200px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #ff0000;
}

#content
{
    margin-left: 205px;
    min-width: 755px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #0000ff;
}

    Fiddle at http://jsfiddle.net/bmMTW/

    • 0