homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to achieve vertically fluid
agoodwin




msg:4419379
 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!

 

rocknbil




msg:4419593
 5:22 pm on Feb 20, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved