{"id":104,"date":"2008-07-31T04:20:20","date_gmt":"2008-07-31T11:20:20","guid":{"rendered":"http:\/\/wellmedicated.com\/?p=104"},"modified":"2009-01-30T14:37:31","modified_gmt":"2009-01-30T21:37:31","slug":"fold-control-browser-bottom-alignment","status":"publish","type":"post","link":"http:\/\/wellmedicated.com\/fold-control-browser-bottom-alignment\/","title":{"rendered":"Fold Control: Browser-Bottom Alignment"},"content":{"rendered":"
The original wellmedicated layout, before it was recently rebooted,\u00a0 had a rather high-concept design.\u00a0 The basic idea being: “every website aligns to the top of the browser, I want mine to align to the bottom”<\/strong>…arrogant, I know.\u00a0 Not surprisingly, this was easier said than done.\u00a0 However, I did manage to figure out a way to pull it off by modifying some javascript from this a list apart article<\/a>.<\/p>\n The final result is a script that detects the height of your browser and the height of your content “above the fold” (in pixels) and then offsets said content the difference of the two.<\/p>\n Before we proceed, you should probably test drive the script and see if it’s right for you.<\/p>\n See the demo in action<\/a><\/strong><\/p>\n This is pretty run-of-the-mill HTML, nothing too crazy.\u00a0 The main thing worth noting is the DIV with the ID of “spacer”<\/em>.\u00a0 This is basically an empty DIV that will bump the actual content down.<\/p>\n The DIV’s “abovefold”<\/em> and “belowfold”<\/em> are the containers you place your content in<\/strong> that you want above and below the fold* respectively.<\/p>\n *The fold <\/em>being the division of what you see and what you have to scroll to see when you load any website.<\/p>\n The #abovefold and #belowfold DIVs are both absolute positioned<\/strong> with widths of 100%<\/strong>.\u00a0 This fixes a problem I was having with centering the content DIVs.<\/p>\n The #top-content and #bottom-content DIVs are for example purposes only, you may remove or rename these to whatever you like<\/strong>.<\/p>\n Background colors that are used are just to visually represent the effect and are by no means necessary<\/strong>.<\/p>\n I must confess that though I can feel my way around, I am hardly a javascript programmer.\u00a0 I wouldn’t be surprised if there was a way to achieve this effect with 2 lines of code – but I googled my fingers off trying to find such a solution and came up empty-handed.<\/p>\nThe Preview<\/h4>\n
The HTML<\/h4>\n
<body>\r\n<div id=\"spacer\"><!-- --><\/div>\r\n<div id=\"abovefold\">\r\n <div id=\"top-content\">\r\n <p>Above the fold text goes here.<\/p>\r\n <\/div>\r\n<\/div>\r\n<div id=\"belowfold\">\r\n <div id=\"bottom-content\">\r\n <p>Below the fold text goes here.<\/p>\r\n <\/div>\r\n<\/div>\r\n<\/body><\/code><\/pre>\n
The CSS<\/h4>\n
#abovefold {\r\nwidth: 100%; \r\nposition: absolute;\r\nbackground-color: #ddd;\r\n}\r\n\r\n#belowfold {\r\nwidth: 100%; \r\nposition: absolute;\r\nbackground-color: #aaa;\r\n}\r\n\r\n#top-content { \r\nmargin: 0 auto; \r\nwidth: 400px; \r\nbackground-color: #ccc;\r\n}\r\n\r\n#bottom-content { \r\nmargin: 0 auto; \r\nwidth: 400px; \r\nbackground-color: #999;\r\n}<\/code><\/pre>\n
The Javascript<\/h4>\n