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://www.shadows.trap17.com/ww/ 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!

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.

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

Thanks

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?

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.

"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.

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!

This post has been edited by shadowx: Aug 10 2007, 03:31 PM

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

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