Question

Basically, I’m trying to get my web page to look like this:

---

The top layer is a fixed height, the bottom layer is a fixed height, but the middle, white layer should be variable height depending on the amount of content inside the #middle_wrap layer.

This is my result unfortunately:

---

---

I can hear you laughing, stop it!! As you will see by my code, I’m getting away with it by setting the height of the #middle_sub_layer to 1500px, which is the height of my content, but this is not ideal – at all! It really needs to be fluid, to fit all the content, whatever the height.

#top_sub_layer { height:200px; text-align:center; z-index:1; position:relative; }
#middle_sub_layer { height:1500px; background:#FFF; padding:25px; z-index:1; position:relative; }
#bottom_sub_layer { height:280px; z-index:1; padding:20px; position:relative; }
#middle_wrap { width:960px; margin:0 auto; top:15px; position:relative; z-index:1; }

How can I alter this style block to get my desired result? I tried height:auto, I tried height:100% and I tried z-index:1 on all the layers. I’m obviously quite new to CSS layouts.

Answer 1

If you want a header with a set height, a footer with a set height, and a middle with variable content, do something like this: JSFiddle Example. Let me know if this is not what you are looking for.