body {
  background: #ccccff url(images/5.jpeg);
  font-family: verdana, arial, sans-serif;
  font-size:14px;
  color: #000000;
}

header{
	background: #ccccff url(images/zast.jpg) no-repeat; /* ÷вет фона */
	background-size: 100%;
    width: 90%;
    height: 110px;
	max-width:1100px;
    margin:0 auto;
    }
 
footer{
    max-width:1100px;
    margin:10px auto 0;
    clear:both;
	background: #00BFFF;
	width: 90%;
	height: 40px;
    }
 
#wrapper{
    max-width:1100px;
	width: 90%;
    margin: 0 auto;
    position:relative;
    height:100%;
    }
 
 
#main{
    float:left;

} 

#navigation {
     background: #FE9798;
     width: 100%;
     height: 30px;
}

#left_side{
    margin-left:-100%;
	background: #40E0D0;
    float: left;
    width: 200px;
    height: 280px;
}
 
#content{
    margin:0 200px 0 200px;
	background: #DCDCDC;
	height: 280px;
}
 
#right_side{
    float:left;
    width:200px;
    margin-left:-200px;
	height: 280px;
	background: #40E0Df;
}

/* указаны параметры для ширины сначала - 950px, потом - 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои*/

@media (max-width: 950px){
#left_side{
    position:relative;
    margin:0;
    width:48%;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
    }
#content{
    width:98%;
    margin:0 auto;
    position:relative;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
    }
     
#right_side{
    position:relative;
    float:right;
    margin:0;
    width:48%;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;}
}

@media(max-width: 500px){
    #left_side{width:99%;}
    #right_side{width:99%;}
}