Топ дня: Avalor

Всем привет,народ пробую сделать веб сайт,так вот такая проблемка,у меня идет html по типу:
<header>Логотип,Шапка</header>
<article>Статья</article>
<aside>Боковая панель навигации</aside>
<footer>Ноги сайта</footer> соответсвенно шапка вверху,ниже отображается статья на 60% экрана,рядом с ней идет боковая панель навигации,и в самом низу уже футер....все теги идуд в рамках,так вот что бы теги не налезали друг на друга применяю float: left;но стоит мне это добавить как рамки обрезаются по кол-ву текста в них...вот как футер в примере ниже...подскажите как сделать что бы рамки были всеравно на 100% экрана.

вот сам код css
* {
margin: 0px;
padding: 0px;
}

header {
width: calc(100%-20px);
height: 30px;
padding: 5px;
background-color: #fff;
border: 3px double silver;
border-radius: 15px;
font-size: 1.2em;
color: #333;
font-family: Comic Sans MS;
}

article, aside {
background-color: #fafafa;
height: 400px;
border-radius: 5px;
border: 3px double silver;
box-sizing: border-box;
float: left;
}

article {
width: 60%;
margin-left: 5%;
margin-right: 5%;
}

aside {
width: 30%;
}

footer {
width: calc(100%-20px);
height: 30px;
padding: 5px;
float: left;
background-color: #fff;
border: 3px double silver;
border-radius: 15px;
font-size: 1.2em;
color: #333;
font-family: Comic Sans MS;
margin-top: 20px;
}