html - CSS box sizing to fit browser -

html - CSS box sizing to fit browser -

i have quick question. want box' width adjust browsers window size is. have this:

http://sc-cdn.scaleengine.net/i/1abc17e8e79b2c3739599001d3fe50f4.png (image)

the code this..

css:

#container { } #main-container { margin-left: 200px; margin-top: 60px; display: inline-block; } .user-stats-container { margin-bottom: 25px; } #main-content { border: 1px solid #eee; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1); margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); padding: 15px; }

html code:

<div id="notification-bar"> notification bar swag </div> <div id="container"> <div id="side-bar"> <div class="side-bar-container"> side bar swag </div> </div> <div id="main-container"> <div class="user-stats-container "> user stats swag </div> <div id="main-content"> main content swag </div> </div> </div>

the main-content div want adjust goes across screen - length wise not close end. know sure need not set width that, because it'll limit it. if i'm not explaining clearly, here's illustration of i'm talking about:

geedmo.com/ themeforest/ wintermin/ dashboard.html

notice how when zoom out, content still adjusts screen. that's want current main-content div.

here's fiddle: fiddle

i'm not exclusively sure if i'm explaining myself, , apologize.

thanks!

kris,

what want accomplish need utilize percentage on main-content div, specify width of parent.

however, have side bar , content area set bit funky, why have margin main content 200px left, , cause attempts create site responsive quite difficult. have do:

side-bar , main-container both need set to:

position:relative;

as rid of left , right margining.

then set both containers to

float:left;

make sidebar has width of 20% or whatever size sense fits best, , main-container 80%.

then set side-bar-container position fixed

html css