Mysidia Adoptables Support Forum - Help with optimizing css

Currently, my site doesn't scale well when the browser isn't at full size. Here's an example:
http://www.clipular.com/c/5250866561...SRcYiHFsM6_H0U
(full size)

http://www.clipular.com/c/5848857542...5TGFK_stM9N2wI
(scaled window)

The sidebar pushes into the rest of the site, and I don't know how to prevent it. This is the css code:

Code:

@import url('https://fonts.googleapis.com/css?family=Short+Stack');

body { font-family: Short Stack; background-color: #59F; }



br {display: block;margin: 3px 0;}

#decor {

    width: 100px;

    height: 500px;

    position: fixed;

    top: 0px;

    left: 500px;

    z-index: 1;

}

#v1 {width: 20%;background-color: #3DF;position: fixed;bottom: 0;top: 0;right: 0;z-index: -1}

#v2 {width: 40%;background-color: #4BF;position: fixed;bottom: 0;top: 0;right: 0;z-index: -2}

#v3 {width: 60%;background-color: #59F;position: fixed;bottom: 0;top: 0;right: 0;z-index: -3}

#v4 {width: 40%;background-color: #67F;position: fixed;bottom: 0;top: 0;left: 0;z-index: -2}

#v5 {width: 20%;background-color: #75F;position: fixed;bottom: 0;top: 0;left: 0;z-index: -1}



#h1 {height: 20%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15}

#h2 {height: 40%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15}

#h3 {height: 60%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15}

#h4 {height: 80%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15}





#content { width: 1450px; margin: auto; padding: 4px; background-color: rgba(255, 255, 255, 0.5); -webkit-border-radius: 7px; margin-top: 30px; min-height: 200px; font-size: 14px; clear: auto; position: absolute; right: 20px;}

h1 { color: #55D; font-family: Verdana; text-align: center; margin: 0; padding: 10px; border-bottom: 2px solid white; font-size: 40px; }

#toplist { list-style-type: none; padding: 5px 10px; margin: 0; height: 30px; font-size: 18px; border-bottom: 2px solid white; text-align: center; }

#toplist li { line-height: 30px; padding-left: 9px; padding-right: 9px; display: inline; }

#container { padding-top: 10px; }

h2 { margin: 0; padding-left: 5px; color: #11D; }

#left { width: 330px; margin: 0; padding: 10px; float: left; position: fixed; left: 9px; background-color: rgba(255, 255, 255, 0.5);}

#right { width: 1400px; padding: 5px; float: right; }

#container { clear: both; }

a { color: #11A; text-decoration: none; }

#speechbubble {

position: relative;

padding: 5px;

text-align: center;

background: #FFFFFF;

-webkit-border-radius: 53px;

-moz-border-radius: 53px;

border-radius: 13px;

border: #7F7F7F solid 2px;

}



#speechbubble:after {

content: '';

position: absolute;

border-style: solid;

border-width:0 15px 15px;

border-color: #FFFFFF transparent;

display: block;

width: 0;

z-index: 1;

margin-left: -15px;

top: -15px;

left: 50%;

}



#speechbubble:before {

content: '';

position: absolute;

border-style: solid;

border-width:0 16px 16px;

border-color: #7F7F7F transparent;

display: block;

width: 0;

z-index: 0;

margin-left: -16px;

top: -18px;

left: 50%;

and my template.tpl

HTML Code:

{include file="{$root}{$temp}{$theme}/header.tpl"}

<body>

<div id='content'><ul id='toplist'>{$menu}</ul>{$avatar}<a href="{$home}profile/view/{$username}">{$username}</a> | ${$cash} {$mysidia->settings->cost} | <a href="{$home}messages">({$messages}) Messages</a> | {$smarty.now|date_format} | {$smarty.now|date_format:"%I:%M %p"} FBT | {$karma} karma<h1>{$site_name}</h1>

        <div id='container'>

        <div id='right'><h2>{$document_title}</h2><p id='text'>{$document_content}</p></div>

        <div id='left'>{$sidebar}</div>

        <div style='clear: both'> </div>

        </div>

        <center>{$footer}Theme by <a href="http://www.pixelpuppy.net" target="_blank">Arianna</a>.</center>

        <div id='decor'>

</div>

</div><div id='v1'> </div><div id='v2'></div><div id='v3'></div><div id='v4'></div><div id='v5'></div>

<div id='h1'></div><div id='h2'></div><div id='h3'></div><div id='h4'></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>

</html>