CODEWITHSUNDEEP
css
TheCarver
TheCarver

Reputation: 19723

Element not expanding with content

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

enter image description here

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:

enter image description here

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.

Upvotes: 0

Views: 53

Answers (2)

horsley
horsley

Reputation: 480

try this

#top_sub_layer { height:200px; text-align:center; }
#middle_sub_layer {background:#FFF; padding:25px;}
#bottom_sub_layer { height:280px; padding:20px; }
#middle_wrap { width:960px; margin:0 auto; }

Upvotes: 0

Akaishen
Akaishen

Reputation: 418

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.

Upvotes: 3

Related Questions