CSS: Special Fluid Layout Problems

Question

See attached image. How is this accomplished? Gosh, I\'ve been going CSS for 8 years but somehow n

Answer 1

I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:

The HTML:

    
        
    

    
        

            Mr. Fixed-width left
        

        

            Mr. Dynamic right. Scroll me!
        
    

And here's the CSS:

body
{
    padding-left: 230px;
}

#left
{
    position: fixed;
    height: 100%;
    left: 0px;
    top: 0px;
    width: 200px;

    background-color: rgb(150, 150, 150);
    border-right: 5px solid rgb(50, 50, 50);

    padding: 10px;
}

#right
{    
    width: 100%;
    height: 10000px;
}

This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.

Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)

Good luck!