Ребят, не получается прижать футер вниз. В чём проблема?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="work_area">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
CSS
html, body{
height: 100%;
font-family: Helvetica;
}
div#wrapper{
position: relative;
width:auto;
height:100%;
margin:auto;
}
div#header{
margin-left: 6px;
margin-top: 8px;
margin-right: 6px;
width: auto;
height: 200px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div#work_area{
margin-left: 6px;
margin-top: 8px;
margin-right: 6px;
height:auto;
width: auto;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div#footer {
position: relative;
margin-left: 6px;
margin-top: 6px;
margin-right: 6px;
margin-bottom: 8px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
width: auto;
height: 180px;
}
Есть ли сильные косяки в вёрстке? Если есть поправьте пожалуйста. Заранее спасибо!