How Do I Extend My Div To 1oo% Height? Also welcoming criticisms on my webpage

[shadowx 0]

Hi all, this is a two part post, firstly how do i get my DIV to go the full length of my page without specifying its height in pixels? My first thought is by using a percentage height but it seems to have no effect on the DIV. I ask because of this page http://forums.xisto.com/no_longer_exists/ that i created. Now im using 128Ox8OO res at the moment and with my current use of BR tags i can extend the div down to the bottom of the page, only in firefox its a few pixels too short and in IE its a few too long so i get scrolling in IE and a grey gap in FF, not good for a website creation website eh?!

Also its silly to use BR tags to resize the DIV as resolutions are different etc.. so id rather have a way of resizing it to the page size, any ideas? Ive tried CSS height values of 1OO% and HTML values in the DIV tag of 1OO%, i also tried using a table instead of a div but still couldnt get it to use percentage values to resize. Is this even possible? im sure it must be.

If you want to see the problem/code just go to the above link, you can also view the CSS at the same directory, its name "main.css" I have no problems with anyone taking a look!

Also while youre there comments on that page would be useful. the goal is to advertise website/script creation and customization, obviously the text there is just example text but i want to know what people think of the layout and colours used as im a good coder im just nt so good at the actual design work, making it look good!

thanks!

[truefusion 3]

You might wanna check out this topic: 100% Height Issue With Stretching Top To Bottom. It's similar to what you're talking about, but the topic-starter posted a link to a tutorial on how to stretch a DIV from top to bottom while keeping with standards. Just mess around with the CSS till you get it to work right for your site.

[shadowx 0]

Ah brilliant, thanks, i shall get to work trying all this stuff!Thanks

[reconraiders 0]

I'm sorry, I guess I'm not too smart on this particular topic, but what's wrong with just using "height:100%" in your stylesheet?

[shadowx 0]

i dont know! i did a little test with a div with just one word inside it and nothing else and the CSS height worked fine, yet when i tried this on my actual page it had no effect so im thinking it depends on what the content of the DIV is... its really frustrating!I had a look at the topic linked above but that didnt help either.

[truefusion 3]

"height: 100%" does not work if you build for standards. But if you remove the DOCTYPE, then "height: 100%" should work. I think the same goes with tables, where if you try to do the same, it won't extend to the bottom of the page. You'll notice that on the W3C site, there is no such thing as "height: 100%" under 'value' in their references; only anything but percentages.

[shadowx 0]

Humm.. will remove the doc type declaration have any negative effects to my site? ive never use a doc type before i just read it can help browser compatibility by letting them know what standards to use.EDIT ive removed the doc type declaration on my local copy and it works fine in FF but as usual IE its giving me problems, it still doesnt let the DIV fill the space which is really annoying!

Edited August 10, 2007 by shadowx (see edit history)

[truefusion 3]

Humm.. will remove the doc type declaration have any negative effects to my site? ive never use a doc type before i just read it can help browser compatibility by letting them know what standards to use.
EDIT ive removed the doc type declaration on my local copy and it works fine in FF but as usual IE its giving me problems, it still doesnt let the DIV fill the space which is really annoying!

Removing the DOCTYPE makes the browser (or whatever medium) guess more, that is, on how you want your website to look like. I believe IE does the most guessing (whether accurate or not) out of all browsers; which is probably the main reason why IE will render a page differently than other browsers. But with a DOCTYPE, you can have browsers lean towards thinking (guessing) the same way. Sure you may still have IE render a bit differently, but that's not your fault or the DOCTYPEs, but at least you'll have less problems to deal with.

In the Linux world, you won't find Internet Explorer (except maybe through WINE). But Microsoft does own most of the market...

[shadowx 0]

In the Linux world, you won't find Internet Explorer

If only the rest of the world was that way! It would make website creation a whole lot easier!

I think i can leave out the declaration then but it still doesnt display properly in IE, in FF it stretches perfectly but i tried in IE and no luck still.. i guess i shall have to trawl the net for some sort of fix for that. Really damn annoying!

[jlhaslip 4]

search:faux columns

[delivi 0]

u should use the CSS script with height set to 100% and also use Java script for compatability with Internet Explorer 6 and below.

[shadowx 0]

Ah brilliance! it works perfectly, yet it is, as that site says, so very simple. Thanks a lot for that link! its really helpful, ive been in this position a few times and never got the right answer but now i have it. Thanks!also Jlhaslip, you double posted

[reconraiders 0]

I guess your problem is solved. I was going to recommend using javascript to dynamically set the height (in pixels) according to the users resolution settings.

[jlhaslip 4]

I think I will leave this topic open as a resource for others, after I move it to the CSS sub-forum.And thanks for pointing out the double post. I had an ISP issue this morning. Deleted the second occurrence.