When browser resizes my css doesn't keep proportions?

1

Hey all,

what i’m trying to do is when my browser resizes it keeps all the elements in proportion whilst scaling them down or if not scaling them down just keeping proportions…

at the moment my topbar shrinks and everything stays the same proportions…

here is my css code:


    body, html {
    min-width:100%;
    margin:0;
    padding:0;
    text-align:center;
    height:100%;
}

#wrapper {
    margin:0 auto;
    width:100%;
    text-align: left;
}

#topbar {
    background-color: #333333;
    width: 100%;
    height: 150px;
    min-height:100%;
    min-height:100%;
    margin-top:0px;
    margin-left:0px;
    position:fixed;
}

#middlebar {
    background-color: #222222;
    width: 100%;
    height: 455px;
    margin-left: 0px;
    margin-bottom: 0px;
    position:fixed;
    bottom:150px;
}

#bottombar {
    width:100%;
    height:150px;
    min-height:100%;
    margin-bottom:0px;
    margin-left:0px;
    background-color:#333333;
    position:absolute;
    bottom:0;
}

#logo {
    top:10px;
    width:192px;
    height:109px;
    background-image:url(images/logo.png);
    position:fixed;
    right:50px;
}

if knows a way to fix this problem or any tutorials on it that would be great! Thanks :smiley: