El código de css que tengo es el siguiente
header {
width: 100%;
height: 60px;
background-color: #141616;
z-index: 0;
border-bottom: 1px solid #383838;
color: #FFFFFF !important;
position: fixed;
top: 0;
left: 0;
right: 0;
}
body {
margin: 0;
background-color: #1E2222;
z-index: 0;
height: auto;
width: 100%;
}
aside#left {
width: 215px;
background-color: #141616;
position: absolute;
top: 0;
bottom: 0;
z-index: 999;
border: 1px solid #383838;
color: #FFFFFF !important;
}
footer {
height: 42px;
position: fixed;
bottom: 0;
background-color: #141616;
z-index: 1;
color: #FFFFFF !important;
width: 100%;
text-align: center;
}
main{
margin-left: 217px;
margin-top: 61px;
}
y mi html
<body>
<header></header>
<aside id="left">
<img src="logo.png">
</aside>
<main style="background-color: red;">
asdf
</main>
<footer>Carinae Gaming</footer>
</body>
estoy buscando la manera en la que se represente como la siguiente figura:
En este caso el sería el body ¿qué propiedades tengo que agregar?