# When browser resizes my css doesn't keep proportions?

**URL:** <https://forum.kirupa.com/t/when-browser-resizes-my-css-doesnt-keep-proportions/219231>\
**Category:** Uncategorized\
**Created:** [March 14, 2007, 11:01pm UTC](https://forum.kirupa.com/t/when-browser-resizes-my-css-doesnt-keep-proportions/219231 "2007-03-14T23:01:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Flash\_Man1](https://avatars.discourse-cdn.com/v4/letter/f/8797f3/32.png) [@Flash\_Man1](https://forum.kirupa.com/u/Flash_Man1)\
**Post date:** [March 14, 2007, 11:01pm UTC](https://forum.kirupa.com/t/when-browser-resizes-my-css-doesnt-keep-proportions/219231/1 "2007-03-14T23:01:47Z")

</div>

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:

```auto

    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 😃