ansaurus

Question

Two divs; left should be fixed width, right should fill rest of space.

Answer 1

A:

Try this to get you started. Sizes can be adjusted from here, and there are other ways to approach it. I set background colors just so you can see what's happening.

<style type="text/css">
    #Panel {
        float: left;
        width: 200px;
        background-color: #fff0f0;
    }
    #Content {
        float: left;
        width: 65%;
        margin-left: 1em;
        background-color: #f0fff0;
    }
    #Foot {
        clear: both;
        background-color: #f0f0ff;
    }
</style>

Stephen P 2010-10-27 01:04:23

Answer 2

+1 A:

Here's that link, applied to your code:

CSS

#frame   { background:pink }
#panel   { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot    { background:cornflowerblue }

HTML

<div id='frame'>
  <div id='body'>

    <div id='panel'>
      Side panel, fixed width.
    </div>

    <div id='content'>
      The rest of the content, should be dynamic width and fill up rest of space 
      horizontally.
    </div>

  </div><!-- End #body -->

  <div id='foot'>
    <div>FooBar.</div>
  </div>

</div><!-- End #frame -->

Works pretty well! Although, IMHO, you don't need the frame or body (but I don't know the master plan). That would look like this:

<div id='panel'>
  Side panel, fixed width.
</div>

<div id='content'>
  The rest of the content, should be dynamic width and fill up rest of space 
  horizontally.
</div>

<div id='foot'>
  <div>FooBar.</div>
</div>

Steve 2010-10-27 08:32:53

+1 this is the best approach IMO. Works well in IE6 too.

MiG 2010-10-27 08:35:15

ansaurus

tags:

views:

answers:

Two divs; left should be fixed width, right should fill rest of space.

related questions