CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nabeel
Nabeel

Reputation: 78

Variable content div height using css with fixed header and footer

I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community.

I am trying to build a layout containing the following elements:

1) A header area 2) A footer area 3) A left hand pane 4) A content area

I have come up with the following CSS, but I do not believe this is the best way of doing what I need.

Please find below an image of what I am looking for, with all the details. Additionally, below is my current CSS and html.

CSS:

* {
    margin: 0;
}

html, body {
   height: 100%;
   overflow: hidden;
        }

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px; 
}

#leftbar {
   float: left;
   width: 350px;
   background-color: #EAEAEA;
   height: 100%;
   position: absolute;
   z-index: -1;
}

#rightbar {
}

#footer {
   height: 100px;            
}               

#header {
   height: 100px;
}

HTML:

<div id="wrapper">
    <div id="header">   </div>
        <div id="content">
            <div id="leftbar">  </div>
            <div id="rightbar"> </div>
        </div>
</div>
<div id="footer">  </div>

Desired layout:

enter image description here

Please note that although I don't mind using jQuery and javascript to accomplish this, I'd like to avoid it.

Any help will be greatly appreciated.

Thanks!

Upvotes: 4

Views: 13934

Answers (4)

Spycho
Spycho

Reputation: 7788

Does this fiddle meet your requirements? I couldn't quite tell whether you wanted the footer to always be at the bottom of the page or not.

Update

This fiddle has the footer always at the bottom.

Upvotes: 3

Aaron Digulla
Aaron Digulla

Reputation: 328556

Use a table or display: table-cell for content which has to have the same height.

[EDIT] A three column layout with a table is done in a couple of minutes and it works.

All those hacks using floating divs just create brittle layouts which sometimes work and sometimes fail. They are hard to debug, hard to get right and need a lot of CSS styles and HTML code. For little return. So if you want to waste a couple of days to get it to work, by all means use floating divs.

It's not my fault that someone said "tables are bad." It's like saying "the sun is bad because it burns you." Well, use it appropriately.

Upvotes: -1

jensgram
jensgram

Reputation: 31508

The article In Search of the Holy Grail on A List Apart comes up with a three-column layout that fits your description. I'd suggest you take a look at the article and omit the #right column altogether.

Upvotes: 1

SpliFF
SpliFF

Reputation: 38956

A common question. If you can't find a suitable layout here it doesn't exist.

Upvotes: 1

Related Questions