Sidebar not going to the footer

Question

(Sorry for my english)

Hi everyone,

I'm trying to remake my school intranet. When i'm trying to make a sidebar, it is not going to the footer

I would like to map the site like this :

  ____________________________
  |          top_bar         |
  ____________________________
  |  S  |                    |
  |  I  |                    |
  |  D  |                    |
  |  E  |                    |
  |  B  |  content_wrapper   |
  |  A  |                    |
  |  R  |                    |
  |     |                    |
  |     |                    |
  |     |                    |
  |     |                    |
  ____________________________
  |           footer         |
  ____________________________

in the content wrapper you have widgets that will be genrated dynmically using PHP but later. When i put a lot of widgets, the sidebar stops after the last menu block. I want that the sidebar resize dynamically between the top bar and the footer when you have lot of widgets.

This is my code :

https://www.dropbox.com/s/r6opwlekb6ip1qi/school_intra.zip?dl=0

Thank you !!

Answer 1

The easiest way to do this is to use display table and display table-cell (suported in IE8 and above and all other browsers).

Wrap a div around the sidebar and the main content:

<div class="main">
        <div class="sidebar">
                <!-- etc... -->
        </div>
        <div class="content-wrapper">
                <!-- etc... -->
        </div>
</div>

Then add this CSS after the original rules (or modify the original rules with these new rules):

.main {
    width:100%;
    display:table;
}
.content-wrapper,.sidebar {
    float:none;
    display:table-cell;
    vertical-align:top;
}

Run your html through the validator as you have a header element in the head of the document when you meant 'head' and your footer is outside the body element which is also not allowed. If you are supporting IE8 you need the html5 shiv for the new html5 elements you are using.

Your css is a little strange also as you have styles only for displays greater than 1024px and then styles for less than 768px but nothing in-between those ranges?

Generally you would have a base css for all devices and then just modify it with media queries where necessary (preferably in the same css file rather than multiple css files).