MozillaZine

Div to extend to th the bottom of the page.

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
wormeyman

User avatar
 
Posts: 344
Joined: October 17th, 2003, 11:17 pm
Location: Somewhere starting browser wars.

Post Posted 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

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted 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. :D
I think it'd actually appear strange-looking to me if bottombar extended to the bottom.

lokean
 
Posts: 370
Joined: May 24th, 2004, 8:27 pm
Location: London, UK

Post Posted 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

User avatar
 
Posts: 5070
Joined: November 17th, 2004, 10:56 am
Location: In a box

Post Posted 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

User avatar
 
Posts: 5070
Joined: November 17th, 2004, 10:56 am
Location: In a box

Post Posted December 2nd, 2004, 2:59 pm

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

jqp

User avatar
 
Posts: 5070
Joined: November 17th, 2004, 10:56 am
Location: In a box

Post Posted 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
 
Posts: 56
Joined: September 20th, 2004, 3:08 pm

Post Posted 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

User avatar
 
Posts: 5070
Joined: November 17th, 2004, 10:56 am
Location: In a box

Post Posted 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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 0 guests