Is this possible with CSS

Question

I want a CSS layout , two column left one is 40% and right the rest (60%) ... but I also want the left one not to gwt smaller than say 200 pixels when the browser is resized. I use absolute positioning. My css is like this

#LeftSection
{
    position: fixed;
    float: left;
    width: 40%;
    height: 100%;
    background-color: #CCCCCC;
}
#RightSection
{
    position: absolute;
    margin-left: 40%;
    width: 60%;
    height: 100%;
    background-color: #333333;
}

Answer 1

Use min-width and the various hacks to get it to work with IE (see link).

EDIT: I shouldn't say hacks. Use conditional comments to include an IE-only stylesheet.

Answer 2

have you tried this one?

min-width:200px;

Answer 3

You should also check out PPK's QuirksMode compatibility tables for CSS properties including min-width/height. This will help you when you run into the inevitable situations where certain browsers (IE6) don't act the same way as the other ones.

Answer 4

All solutions with min-width for LeftSection will lead to overlapping of the two <div /> or whatever block element you use, e.g. if the browser window is 400px wide, then LeftSection will be 200px wide, but RightSection will be 240px wide and have a margin-left of 160px, therefore overlap by 40px. Unfortunately, there is no min-margin style in CSS, so IIRC it will not be possible to totally avoid overlapping for small browser windows with your markup.