Как растягивать wrapper вместе с content?

Question

[FX-Mercury]

body {
	background:url(../img/shattered.png);
	margin:0;
}

html,body{height:100%;}

#wrapper {
	background:#F40408;
}
    
#header {
	background:#1C1ADD;
}

#navigator {
	background:#31DC2F;
}
     
#sidebar {
	background:#C12DE1;
}

#content {
	background:#23AA33;
}

#footer {
	background:#000000;
}

#wrapper {
    width:1100px; 
	margin:0 auto;
	height:100%;
}

#header {
	height:200px;
}

#navigator {
	
}

#content {
	float:left;
	width:70%;
	min-height:80%;
	height:auto;
}

#sidebar {
	float:left;
	width:30%;
	/*
	min-height:100%;
	height:auto;
*/
}

#footer {
	clear:both;
	height:200px;
}

<div id="wrapper">
 
     <div id="header"> header </div>
     
     <div id="navigator"> navigator </div>
     
     <div id="sidebar">  </div>
     
     <div id="content">

     </div> 
           
     <div id="footer"> footer </div>

    </div>

хочу чтобы у wrapper был класс, который добавляет тень по бокам.

Comments

[Роман]

Как растягивать wrapper вместе с content?

хочу чтобы у wrapper был класс, который добавляет тень по бокам.

Каков ваш окончательный вопрос?

Answer 1

[Андрей Федоров]

э...

#wrapper {
  box-shadow: 0 0 20px rgba(20,20,20,.5);
}

upd: посмотрите тут codepen.io/aliencash/pen/EjaoyO

Comments

[FX-Mercury]

контент растягивается, а wrapper нет. И по этому тень остается на месте

[Андрей Федоров]

Нарисуйте в графическом редакторе что конкретно вы хотите получить. Код должен быть не сложным...