shadowx
Aug 9 2007, 10:01 PM
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!
Reply
truefusion
Aug 10 2007, 12:41 AM
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.
Reply
shadowx
Aug 10 2007, 12:22 PM
Ah brilliant, thanks, i shall get to work trying all this stuff! Thanks
Reply
reconraiders
Aug 10 2007, 01:38 PM
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?
Reply
shadowx
Aug 10 2007, 01:55 PM
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.
Reply
truefusion
Aug 10 2007, 02:08 PM
"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.
Reply
shadowx
Aug 10 2007, 03:24 PM
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!
Reply
truefusion
Aug 11 2007, 03:20 AM
QUOTE(shadowx @ Aug 10 2007, 11:24 AM)  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...
Reply
shadowx
Aug 11 2007, 11:27 AM
QUOTE 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!
Reply
jlhaslip
Aug 11 2007, 01:42 PM
Latest Entries
jlhaslip
Aug 11 2007, 09:47 PM
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.
Reply
reconraiders
Aug 11 2007, 06:25 PM
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.
Reply
shadowx
Aug 11 2007, 04:43 PM
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 
Reply
Similar Topics
Keywords : extend, div, 1oopercent, height, welcoming, criticisms, webpage
- Css Help 100 % Height
(6)
100% Height Issue With Stretching Top To Bottom - Full Page
Problem with content not stretching from top to bottom. (5) Another CSS problem thats been annoying me. I got this tempalte off
http://www.xs4all.nl/~peterned/examples/csslayout1.html the css file is here
http://www.xs4all.nl/~peterned/examples/css/layout1.css I went ahead and applied it to my template.
Their main divs contain 1 main container, 3 sub divs (header, content, and footer). HTML div
id =" container "> div id =" header "> /div > div id =" content "> /div > div id
=" footer "> /div > /div > I've had to add a few more divs inside the header div to
include my table for banner an....
Height % In Ff Problems With Css
(3) Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
example if I put blablabla the div container will only be as high as the text makes it, when in
internet explorer it does make it take up 100% of the page or whatever height in percentage I input
in it. by the way, html, body {} have 100% height in them, so does the container that has the div
element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
one called #div is the one I want with 100% height. Thanks for any help.....
Basic Css Layout Issue
Floated Cell with similar height (5) Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem
being I don't know how to make a floated cell be the same height as another. FOr example CODE
<div id="main"> <div id="left"> just some </br> stuff
over </br> here! </div> <div id="right"> but...</br>
over here </br> I have </br> even more stuff</br> to </br>
display</br> </div> </div> now If I float the left to the left ....
Looking for extend, div, 1oopercent, height, welcoming, criticisms, webpage
|
|
Searching Video's for extend, div, 1oopercent, height, welcoming, criticisms, webpage
|
advertisement
|
|
