Jump to content
xisto Community
Sign in to follow this  
shadowx

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by shadowx (see edit history)

Share this post


Link to post
Share on other sites

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). :P But Microsoft does own most of the market...

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.