If one uses float:left to layout two columns, does the left column have to have a width specified? Without a width assigned, when I shrink the width of the browser page, the second (main) column gets put underneath the left (navigation) column. Is there a way to avoid this, without assigning a width? If not, what is the least width spec’s I need to add? I.e. can I assign a fixed pixel width to the left column, and have the right column get the rest?
Thanks
—– Addition —–
After trying various answers, noting their complexity, is there any reason not to just use a two column table?
This answer does not match the original question, which indicates to use float:left, the “generation 2” css layout mechanism after tables. However, after trying multiple variations and tweaks to the float:left layout given, and none of them working totally correctly, I tried a two column table. Using that the width of the two elements don’t need to be specified, the second element never appears below the first, and scrollbars are added as needed, with the right column content never being cut off and unscrollable.
Thanks everyone for your help. I must say, I feel in some cases the “generation 2” css spec with the addition of the floating layouts, really has made things unnecessarily complex to use, if it can even work at all, e.g. like in my case, where I don’t know the content of the right column (as this page is a template, holding variable right column content). In this case, I could not get any of the answers to work, with the closest being Ryan’s, but in some cases the content at the right would get clipped off, and was not scrollable.