Div to extend to th the bottom of the page.

wormeyman · Post by **wormeyman** » November 24th, 2004, 1:24 am

http://www.wormeyman.com/temp/pantry/Pa ... lices.html

How can i get .bottombar to extend to the bottom of the page?

peter.reisio · Post by **peter.reisio** » November 24th, 2004, 2:29 am

It'd involve more than just altering a little bit of code to do it right.

My advice is to forget about this. The site is fixed-width, so I don't see the point in trying to make anything extend to any edge - especially the bottom, since its opposite (the top) does not start (or extend to) the top.

It looks fine as it is. In fact despite it being fixed-width I like it; The colors and general appearance are nice and of course the 404 is enjoyable.

I think it'd actually appear strange-looking to me if bottombar extended to the bottom.

lokean · Post by **lokean** » November 24th, 2004, 3:18 am

You could have a look at my demos [ http://stijlstek.nl/demo/ ] I think you'd be interested especially in the Damascus one.

jqp · Post by **jqp** » December 2nd, 2004, 2:59 pm

In general, the way to do this is to wrap everything in a <table> and make that <table height=100%>
for example, wrap the entire page in:
<table id="wholepage"><tr><td id="wholepage">
and do in your stylesheet:

Code: Select all

html { height: 100%; }
body { height: 100%; }
table#wholepage { height: 100%; }
td.wholepage { height: 100%; }
div.bottombar { height: 100%; }

If you only make the div height 100% without doing the rest of it, then that div will be 100% of the height of the whole page regardless of context - adding a lot of extra space to the site. If the div is inside the table cell, it will only go to 100% of the table cell.

jqp · Post by **jqp** » December 2nd, 2004, 2:59 pm

BTW my suggestion may not work with XHTML1.0 doctype. Not sure.

jqp · Post by **jqp** » December 2nd, 2004, 3:05 pm

Also, this:

Code: Select all

div.something { 
...
left: 50%;
...
margin-left: -355px;
...
}

Has some VERY odd effects if your window goes any smaller than 800px. I suggest, again, wrapping the whole thing in a table, and add to my above code:

Code: Select all

td.wholepage { text-align: center; } // This will put the DIV in question in the center of the page
div.centered {
 /* everything else*/ 
text-align: left; // this will make sure you're text isn't centered, even though the DIV is positioned in the center
/*everything else*/

8th_Eclipse · Post by **8th_Eclipse** » December 3rd, 2004, 6:14 pm

jonnyq wrote:If you only make the div height 100% without doing the rest of it, then that div will be 100% of the height of the whole page regardless of context - adding a lot of extra space to the site. If the div is inside the table cell, it will only go to 100% of the table cell.

what if you put everything else in a div that's 80% and then put the bottom div at 20%? mwahahahhahaha!!!!!

jqp · Post by **jqp** » December 7th, 2004, 1:21 pm

what if you put everything else in a div that's 80% and then put the bottom div at 20%? mwahahahhahaha!!!!!

That might work, but you're not going to like how it worked when you resize your window. Using tables can prevent this altogether..

You're also not goign to like what happens when the content of that DIV should flow over the 80% mark.

Again, tables will make it more flexible.