CSS height adjust - css

Question

I'm building a site that has 3 sections in the middle that all sit side by side.
The center box is where the page's content will be shown and therefore will adjust to fit.
The issue is that the #leftnav and #rightnav should adjust to the height of the parent container, this would work when the #centralcontent height is adjusted by its content (text and so on) - how is this best done?
Please see the code in action: http://jsfiddle.net/AlexHighHigh/WJKR5/
Here's the HTML
<div id="pagecontainer">
<div id="header"><img src="http://s23.postimg.org/u4fk339vf/design_1_01.jpg" width="850" height="308" alt="logo" /></div>
<div id="centralcontainer">
<div id="leftbar"> </div>
<div id="centralcontent">
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="rightbar"> </div>
</div>
<div id="footer"><img src="http://s23.postimg.org/w6g1hc7uj/design_1_05.jpg" width="850" height="30" alt="footer" /><br />
© 2014 Surrey Hills Fox Control</div>
</div>
..and here's the CSS
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
margin: 0;
padding: 0;
color: #fff;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
#header {
height: 308px;
background-color:#66CCFF;
}
#centralcontainer {
height: auto;
width: 850px;
}
#leftbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
background-color:#66CCFF;
}
#centralcontent {
float: left;
height: auto;
width: 680px;
background-color:#FFF;
}
#rightbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
bottom: 0;
background-color:#66CCFF;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}
Any help appreciated, thanks in advance!
Alex

Answer 1

add height: 100%; to body and it would work
why it works?? your #pagecontainer has height:100%, so it would set 100% of the parent of pagecontainer, which is body, but you have not set height of body
EDIT
I see you used floats, if its fine with you, use display :table as it helps you avoid clearing the floats and other stuffs
see demo
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
margin: 0;
padding: 0;
color: #fff;
height : 100%;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
#header {
height: 308px;
background-color:#66CCFF;
border:1px solid #FFF;
}
#centralcontainer {
min-height: 100%;
width: 850px;
display:table;
}
#leftbar {
display:table-cell;
width: 85px;
min-height: 100%;
height:100%;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
background-color:#66CCFF;
border:1px solid #FFF;
}
#centralcontent {
display:table-cell;
height: 100%;
width: 680px;
<!-- background-color:#FFF;
/*commented*/
-->
}
#rightbar {
display:table-cell;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
background-color:#66CCFF;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}

Answer 2

Hi you probably should use common fix for same columns height
In you case just add overflow:hidden; to #centralcontainer and to
#leftbar,#rightbar
add
padding-bottom:9000px;
margin-bottom:-9000px;
Please look to
Seems working sample

Answer 3

Working Demo
I added a couple of other things to your CSS for better cross-browser compatibility but you can remove it if you really want.
CSS:
html, body {
margin: 0;
padding: 0;
zoom: 1;
height: 100%;
width: 100%;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
color: #fff;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
display: table;
}
#centralcontainer div {
outline: 3px solid red;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto;
}
#header {
height: 308px;
background-color:#66CCFF;
}
#centralcontainer {
width: 850px;
position: relative;
}
#leftbar {
position: absolute;
width: 85px;
background-color:#66CCFF;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
top: 0;
left: 0;
}
#centralcontent {
left: 85px;
position: relative;
height: auto;
width: 680px;
background-color:#FFF;
}
#rightbar {
position: absolute;
width: 85px;
background-color:#66CCFF;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
bottom: 0;
top: 0;
right: 0;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}