problem with columns

[ruess]

Hi there,

I am trying to get a two column page to stay in place. I want the columns to be a bit more rigid than they are. I want the left column to be stationary and not move, while the right, main column is able to expand and contract as the browser is stretched. The problem is now that when I shrink the width of the browser, the picture in the left column jumps down to the bottom of the page. I've played around with the CSS and I can't seem to figure out the solution. Here is the css code related to the columns:

Any help would be great! (using CMS Made Simple version 0.13)

Site: http://www.westriveracademy.com/cms/index.php?page=home

/*COLUMNS*/

    div#right{
        float: right;
        line-height:1.5;
        min-width: 300px;
        max-width: 600px;
        display: inline;
        margin; 0px 5px 0px 0px;
        padding: 1% 1% 0 0;
    }

    div#quotes{
        position: static;
        text-align: left;
        font: italic bold 1.10em Comic Sans MS, Helvetica, sans-serif;
        width: 175px;
        margin: 10px 0 0 0;
        padding: 5px;
    }

    div#right{
        position: static;
        float: left;
        width: 250px;
        display: inline;
        margin: 10px 0 0 0;
        padding: 0px;
    }

    /*END COLUMNS*/

[Dr.CSS]

    /*COLUMNS*/

    div#main {
        float: right;
        line-height:1.5;
        width: 70%;
        padding: 1% 0 0 0;
    }

    div#quotes{
        text-align: left;
        font: italic bold 1.10em Comic Sans MS, Helvetica, sans-serif;
        width: 190px;
        margin: 10px 0 0 0;
        padding: 5px;
    }

    div#content2 {
        posiion: static;
        fl0at: left;
        width: 200px;
        margin: 10px 0 0 0;
        padding: 0px;
    }

[ruess]

That fixed the problem of the picture nicely - thanks! Now however, when i shrink the width of the browser two things happen: 1) The text goes underneath the pic and 2) the red text sinks to the botton again.

Thanks much!

[Dr.CSS]

OK try this...

div#main {
        float: right;
        line-height:1.5;
        width: 68%;
        padding: 1% 0 0 0;
    }

[ruess]

Thank you, that worked! Much appreciated!