Question

I know that virtually anything is possible with CSS, but I’m a bit stumped on how to achieve this layout model.

I’ll let the image do most of the talking. Two columns, both fixed width and centered in the browser (to begin with). I’m stumped as to how to make the main column expand fluidly as screen size allows. I can give the main column a min-width as the baseline, but how can it expand fluidly to fill the remaining right hand portion of the browser viewport? All-the-while the layout should stay centered.

I’m the type who likes to experiment until I figure something out, but I’m not sure where to even begin here. Would negative margins, max-width % values, min-width px values, and overflow:hidden be a place to begin?

I guess what I’m asking is, has anyone achieved this layout in the past? Is there a way to achieve it that doesn’t seem too “duct-taped” together? Hopefully I’m missing something obvious!

Any help, tips, or relevant links are greatly appreciated!
Thanks!

Answer 1

I think this is essentially what you’re looking for (scaled down to fit in the fiddle window). The overlay is just there to show where the 50% mark is.

http://jsfiddle.net/m6Dk6/1

<div id="outer">
    <div id="inner">
        <div id="sidebar">
            SIDEBAR
        </div>                    

        CONTENT 
    </div>
</div>

---

#outer{
    float:right;
    width: 50%;
}

#inner{
    margin-left: -480px;    
    min-width: 960px;
}

#sidebar{
    width: 200px;  /* your width here */
    float: left;
}