How to achieve a two column centered layout, with the main column expandable on wider screens?


Tags: css,responsive-design

Problem :

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

model of my desired layout

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!



Solution :

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;
}

    CSS Howto..

    How to make the long text to fit inside a small div?

    How to show an arrow down symbol with CSS

    jQuery Show/Hide for and

    fa-star () is always yellow, how to make it white?

    How to change margin according to other elements?

    How to modify CSS when requirements change?

    How to overlap divs in html

    How do I make these HTML blocks of info stay the same size?

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to change the content value of iconmoon font?

    How to make a background-color transition that eventually covers div to center? [closed]

    how to vertically center align div elements with contents other than text

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How to remove space between bootstrap columns?

    ng-show/ng-hide breaking CSS animations

    How to change the Img tag src through css only? [closed]

    how to align 5 div side by side in center using css?

    How can I swap out text in a text-box by using only CSS mouse related events?

    How to control a

    Show/Hide images based on tab selection

    How to script CSS to achieve hide/appear effect based on hover

    How to insert a div below dynamic divs row after onclick

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    Don't understand how to control css elements with jQuery css

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    How to remove the margin top from a div with display table-cell?

    How to attach CSS to my template?

    How to make partial scrolling div?

    How to make all divs same height, based on text content?

    How to show foreground image and then hide on hover?