Welcome to WebmasterWorld Guest from 23.23.53.177

Forum Moderators: not2easy

Message Too Old, No Replies

How to achieve vertically fluid

   
7:50 pm on Feb 19, 2012 (gmt 0)



I am currently working on making my web site and am having trouble finding a way to achieve what I am looking for. I have the framework of my site set up as such.

header
nav
content
services
footer

I want the "content" section to be semi fluid in that it will expand and contract to a certain extent such that when the window size allows such, the footer aligns with the bottom of the window. I am using html5 so I would like to avoid tables and minimize any use of excess divs. I am open to using js if nessecary, but I would like the cleanest and most cross browser compatible solution available.

Thanks!
5:22 pm on Feb 20, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome aboard agoodwin,

I am using html5 so I would like to avoid tables and minimize any use of excess divs.


Good for you, but HTML5 hasn't stopped many coders from doing this. :-)

Take the vertical part of this Dead Centre [wpdfd.com] example and see if it helps.

(The horizontal portion of that has issues when the window gets too narrow - but they can be fixed with a simple margin:auto.)

Although this part,

the footer aligns with the bottom of the window.


May require some Javascript to help. If you have a page of content and the footer just appears below the content "naturally," when the height exceeds the content height you may have to use JS to "glue" it to the bottom.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month