Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirroring the header. The sidebars have fixed widths, so the center content will adjust based on screen size. I've tried multiple approaches to achieve this without success! My current best attempt involves adding 'commented' code which creates the left header sidebar as intended, but unfortunately shifts the left sidebar into the center section where the left sidebar should be.
I believe I am very close to the desired layout but missing something crucial. Can someone guide me in the right direction?
Html
<body>
<div class="container">
<div class="header">
<!--<div class="headerleft">
<div class="headerleftcon">leftcon</div>
</div>-->
<div class="header-content">Header
</div>
</div>
<div class="body">body
<div class="left-sidebar">
<div class="left-content">left sidebar</div>
</div>
<div class="right-sidebar">
<div class="right-content">right sidebar</div>
</div>
<div class="content">Content
<div class="left-col">
<div class="left-colcontent">left col</div>
</div>
<div class="right-col">
<div class="right-colcontent">right col</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-content">Footer</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
/*.headerleft{
height: 100%;
background-color: red;
width: 200px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}*/
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;}
.content{
padding: 0px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 200px;
float: left;}
.right-sidebar{
height: 100%;
background-color: gray;
width: 200px;
float: right;}
.right-col{
height: 500px;
background-color: blue;
width: 150px;
float: right;}
.left-col{
height:500px;
background-color: blue;
width: 150px;
float: left;}
.left-content{
padding: 100px 10px 100px 10px;
}
.left-colcontent{
padding: 100px 10px 100px 10px;}
.right-content{
padding: 100px 10px 100px 10px;
text-align: right;}
.right-colcontent{
padding: 100px 10px 100px 10px;
text-align: right;