How can I make two proportional columns in HTML/CSS where the left column follows the user as they scroll?

Question

I want a two column layout where the two columns are proportional in size to each other and won't overlap. The left column has only a little bit of content in the top of it and should scroll down with the page (float along with the page as it scrolls down.) The right column will have a lot of data and won't have a scrollbar, the browser will scroll down the page.

So I want to combine the two examples below so that when the font is resized and the content changes, the columns remain proportional like they are in Example 2, but I also need the left side content to follow the user down the screen as they scroll to see all of column 2 (as it does in Example 1).

Please see the example here to see what I am talking about:

http://vershok.com/test_layout_20090610.html

I've updated the example with a JQuery UI calendar in the left div to show how position: fixed; layouts don't resize the right column correclty (the JQuery calendar has issues because it overflows its div.)

http://vershok.com/test_layout2_20090610.html

I want a two column layout where the two columns are proportional in size to each other and won't overlap. The left column has only a little bit of content in the top of it and should scroll down with the page (float along with the page as it scrolls down.) The right column will have a lot of data and won't have a scrollbar, the browser will scroll down the page.

Answer 1

If you use DIVs to split the page, you can achieve this effect, like so:

<div style='position: fixed;width: 20%;'>
  Text for the left column.
  Should scroll down the page
</div>
<div style='float: right; width: 80%;'>
  *insert large content here. including table content if you want.*
</div>

Answer 2

An element with position:fixed is basically an absolutely positioned element, positioned relative to the browser window.

This means it is removed from the flow of the document and will not affect how the elements before or after it are positioned (or sized). That is why your left column is not changing width when the fixed position element is too wide.

You should be aware that ie6 does not support position:fixed and defaults back to position:static. ie7 only supports position:fixed if you are using a strict doctype.