I’m designing a XHTML/CSS page.
I have 4 separate areas on the page (Header/Content/Sidebar/Footer).
[img]http://www.viziworx.com/temporary/layout.png[/img]
I want the ‘Content’ & ‘Sidebar’ areas to expand (in height) based upon the information that is entered into those tags so that depending on the length of the information, both tags height will expand and push the ‘Footer’ down to accommodate that information.
Currently, I’ve setup a ‘Master.css’ file that has all the necessary style elements for all pages and then I’ve individually written CSS in each .html file to set the height of the ‘Content’ & ‘Sidebar’ based on the information on those pages.
For example: (written in each individual .html file)
Code:
#content {
width: 880px ;
height: 1320px ;
margin: 0 auto ;
}
#sidebar {
height: 1320px ;
}
Here’s the catch, the ‘Footer’ needs to stay glued to the bottom of the browser.
Right now when I add information to the ‘Content’ & ‘Sidebar’, if I don’t change the style element that contains the height of those tags, the information expands behind and below the ‘Footer’.
I was hoping that there was an easier, more effective way to address this then changing the height of the ‘Content’ & ‘Sidebar’ on each page.
Anyone have any ideas?
