I want my leftPane to fill all the way down till it hits the footer with that grey and I can’t figure out how to get it to do that.
Hi,
You are using the wrong approach as height:100% is never going to do what you expect or what you want. At best you will get a fixed height of 100% that will not grow or at worst a succession of elements having viewport height stacked on top of each other. Percentage height can only be based on a parent that has a fixed height and not on whose height is dictated by content or auto height or min-height.
For IE8+ the easiest way to get ‘equal columns’ is simply to use the display:table-cell and display table properties instead of floats and equal columns are then automatic.
In your code you can achieve this with these alterations.
#leftPane,#wrapper{
float:none;
display:table-cell;
vertical-align:top;
height:auto;
}
#logo{width:auto}
#content{height:auto}
You will need to remove that empty clear:both div at the bottom (which is unnecessary 99.999% of the time with proper clearing and containing techniques anyway).
It is also usually best to wrap the two table-cell columns in a parent div that has ‘display:table’ applied (along with the appropriate width (or max-width)) but isn;t always necessary as the browser will construct an anonymous table element anyway.
Your 100% width on the logo + padding is causing a horizontal scrollbar so don’t add widths when they are not necessary. A static element is auto width and will fill the available space anyway.
Hope that helps.
@PaulOB how does display as table, table cell and other table css works?
why use that instead of a table?
thx
D
They emulate the <table> <tr> <td> tags in HTML. If you know how they work then you are all set.
Tables are meant for tabular data only and not for layout. Html is always about structure and semantics and you use the most semantic element for the job in hand. e.g. If you have tabular data you use a table but if you are creating a layout then you use the correct html (e.g. heading tags for headings , 'p’s for paragraphs and divs for divisions and so on…).
The display:table properties allow elements to mimic the behaviour of table-cells but without inferring any semantics on the elements you use. CSS applies no semantics to the html so you can safely use display:table-cell and know that you aren’t destroying the known world 
Therefore when you want equal columns but are not displaying tabular data then you use divs and changes their display with css so that you can mimic the equal column behaviour of tables.
Thank you Paul, the helps. will try it out
D