问题描述:

trying to get to grips with layouts I'm trying to get a full width header, inside the header is a left sidebar and a right sidebar. The body is divided into 5 sections full width, left and right sidebars, center content with 3 columns, the footer will be the same as the header.

The sidebars are fixed width so the center content will compress or expand as per screen size.

I've tried many ways to achieve this, but failing dismally!

My best attempt is as follows, when i add the 'commented' code it adds the left header sidebar as i intended, but moves the left sidebar into the center section, where the left sidebar is supposed to be its now the center section.

I think I'm very close but missing something. can someone point me in the right direction please?

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;

margin: }

.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;

JSFiddle

网友答案:

Please take a look at this jsfiddle: http://jsfiddle.net/Ab2LT/

I am not sure if this is the result that you are expecting. I added a <div style="clear:both"></div> after the end of the div header to clear the elements floated.

相关阅读:
Top