Hi, I'm sort of a newb...
I'm trying to build a page that has one big column right down the middle that holds all my content. The reason being I have a nice tile for a background on the body and I wanted to use ridge borders on the left and right to set it off from the background.
I'm using a #main div and nesting the rest of my divs inside of that to create the actual content of the page.
My question is, I cannot get the main div to stretch from the top to the bottom of the page. In quirks mode, I { height:100%; } was working fine, but with my strict doc type declaration now no matter what I do it auto-resizes the height of my main div so that it stops at the bottom of whatever text I put in it.
Thanks!
PS: I have an test example of the page
here (<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/test.html">http://www.tarleton.edu/students/st_bos ... /test.html</a><!-- m -->) .The Strict mode rendering is correct and this topic has been discussed in depth: here (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?threadid=10910&perpage=15&highlight=100*%20height&pagenumber=3">http://forums.webdeveloper.com/showthre ... genumber=3</a><!-- m -->).For browsers that interpret CSS correctly (and dumb IE is not one of them) you can use absolute positioning with top and bottom set to 0. In this case, however, you would have to deal with the overflow issues.Thank you.
Now, how do I deal with overflow issues? You don't have to answer you can just point me to a good resource. I know I'm starting to be an annoying 20-questions noob.You could browse around <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m --> for inspiration. I think the section you are looking for is in fact <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html">http://www.w3.org/TR/REC-CSS2/visufx.html</a><!-- m --> .
I haven't tested it so I don't know what issues vladdy refers to. However, if Vladdy's post means it doesn't work in IE you could be wasting your time. It won't do any harm to experiment anyway.Hi,
To set a div to 100% of the screen window (viewport) you need to give it something to be 100% of. Therefore you need to set the html and body tags to be 100% high then your divs will have something to refer to.
Add this code to your stylesheet and you should get the effect you want (in Ie6 and Mozilla1.2+).
html,body {height:100%}
However 100% is 100% of the viewport and not 100% of the page size so if your content is more than will fit on the screen then your content will spill out of the bottom of the div in Mozilla. However IE6 as usual does things differently (incorrectly I think) and expands the div to contain the content which however is the effect I think you wanted.
Hope some of this is of use.
PaulSo, there is really no bug-free way to do this one, simple thing?
You know, I'm really beginning to think this whole CSS Layout > Tables is crap.
If I do this width a fixed-width, centered table, it not only works the same in IE and Mozilla, but my code is less bloated.
With CSS, it either works in one or the other, not both, and I have to mess with all sorts of extraneous code like overflow, clipping, absolute positioning, etc, etc.. that I also have to go out of my way to research.
1) I took a look under your hood and there's no bloat there. If you had used tables it would be an awful mess and it wouldn't work on some browsers.
2) Once you add your content the center DIV will expand and everything will be well.
3) It is important to use mark up properly. <div id="header">HW Tech Computers</div> should be <h1>HW Tech Computers</h1> and the style sheet adjusted accordingly.Hi Stellar,
CSS has its strengths and its weaknesses but it is the way forward. The problems arise when you try to duplicate table layouts instead of utilising the strengths of CSS.
There are many layouts with css that tables cannot reproduce (and of course vice versa). CSS is about fluid accessible design and when you work with its strengths and avoid pixel precision you will reap the benefits of cleaner lighter faster code that is more accessible to all users.
In an ideal world we would all of course like to be able to produce any design we like with css and have it cross browser friendly. Unfortunately this is not the case at the moment and for the time being work- arounds need to be employed.
I would try and stick with it if I were you and adapt your design to suit. (Remember your design should suit the user and not the designer.) If you must use tables for a certain layout then you can still use css to define all the necessary property/values and keep the code cleaner.
(BTW did you try adding html,body {height:100%} to your code as I'm sure it achieves the effect you want.)
Paul
Yes, the 100% hack works because it is hack and not correct legal usage of CSS it was breifly explained previously on page [2] of the thread I provided a link to (above) with a code sample that I produced.
CSS is extremely powerful, however many user-agents have been lazy at implementing the rules and that's part of the reason things are in such a mess.I put the html, body { height:100% } hack into it, but I don't have Mozilla here at work to test it on so I thought you guys could give me some feedback.
<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/test.html">http://www.tarleton.edu/students/st_bos ... /test.html</a><!-- m -->
I also added a right menu div for links, and I will be adding an iframe for the content of the page.
I still don't know if this is good code, but it looks just like I want it in IE6.
FWIW I came across one of the United Stated CIA's webpages while doing some research, and it has the same design I am going for and geuss what... they used tables!
<!-- m --><a class="postlink" href="http://www.cia.gov/cia/publications/factbook/geos/li.htmlAre">http://www.cia.gov/cia/publications/fac ... li.htmlAre</a><!-- m --> your servers down at the moment?
(the link doesn't work at the moment)link has changed actually...
<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/">http://www.tarleton.edu/students/st_bostick/temp/</a><!-- m -->
consequently though, I do think the server was down this morning for a big upgrade. should be back up now.It is back up now.
And mozilla is fine - 1.1a and 1.4. So's Opera 7.1. The only think is they're all longer than 100%. but it doesn't matter.
I'm trying to build a page that has one big column right down the middle that holds all my content. The reason being I have a nice tile for a background on the body and I wanted to use ridge borders on the left and right to set it off from the background.
I'm using a #main div and nesting the rest of my divs inside of that to create the actual content of the page.
My question is, I cannot get the main div to stretch from the top to the bottom of the page. In quirks mode, I { height:100%; } was working fine, but with my strict doc type declaration now no matter what I do it auto-resizes the height of my main div so that it stops at the bottom of whatever text I put in it.
Thanks!
PS: I have an test example of the page
here (<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/test.html">http://www.tarleton.edu/students/st_bos ... /test.html</a><!-- m -->) .The Strict mode rendering is correct and this topic has been discussed in depth: here (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?threadid=10910&perpage=15&highlight=100*%20height&pagenumber=3">http://forums.webdeveloper.com/showthre ... genumber=3</a><!-- m -->).For browsers that interpret CSS correctly (and dumb IE is not one of them) you can use absolute positioning with top and bottom set to 0. In this case, however, you would have to deal with the overflow issues.Thank you.
Now, how do I deal with overflow issues? You don't have to answer you can just point me to a good resource. I know I'm starting to be an annoying 20-questions noob.You could browse around <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m --> for inspiration. I think the section you are looking for is in fact <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visufx.html">http://www.w3.org/TR/REC-CSS2/visufx.html</a><!-- m --> .
I haven't tested it so I don't know what issues vladdy refers to. However, if Vladdy's post means it doesn't work in IE you could be wasting your time. It won't do any harm to experiment anyway.Hi,
To set a div to 100% of the screen window (viewport) you need to give it something to be 100% of. Therefore you need to set the html and body tags to be 100% high then your divs will have something to refer to.
Add this code to your stylesheet and you should get the effect you want (in Ie6 and Mozilla1.2+).
html,body {height:100%}
However 100% is 100% of the viewport and not 100% of the page size so if your content is more than will fit on the screen then your content will spill out of the bottom of the div in Mozilla. However IE6 as usual does things differently (incorrectly I think) and expands the div to contain the content which however is the effect I think you wanted.
Hope some of this is of use.
PaulSo, there is really no bug-free way to do this one, simple thing?
You know, I'm really beginning to think this whole CSS Layout > Tables is crap.
If I do this width a fixed-width, centered table, it not only works the same in IE and Mozilla, but my code is less bloated.
With CSS, it either works in one or the other, not both, and I have to mess with all sorts of extraneous code like overflow, clipping, absolute positioning, etc, etc.. that I also have to go out of my way to research.
1) I took a look under your hood and there's no bloat there. If you had used tables it would be an awful mess and it wouldn't work on some browsers. 2) Once you add your content the center DIV will expand and everything will be well.
3) It is important to use mark up properly. <div id="header">HW Tech Computers</div> should be <h1>HW Tech Computers</h1> and the style sheet adjusted accordingly.Hi Stellar,
CSS has its strengths and its weaknesses but it is the way forward. The problems arise when you try to duplicate table layouts instead of utilising the strengths of CSS.
There are many layouts with css that tables cannot reproduce (and of course vice versa). CSS is about fluid accessible design and when you work with its strengths and avoid pixel precision you will reap the benefits of cleaner lighter faster code that is more accessible to all users.
In an ideal world we would all of course like to be able to produce any design we like with css and have it cross browser friendly. Unfortunately this is not the case at the moment and for the time being work- arounds need to be employed.
I would try and stick with it if I were you and adapt your design to suit. (Remember your design should suit the user and not the designer.) If you must use tables for a certain layout then you can still use css to define all the necessary property/values and keep the code cleaner.
(BTW did you try adding html,body {height:100%} to your code as I'm sure it achieves the effect you want.)
Paul
Yes, the 100% hack works because it is hack and not correct legal usage of CSS it was breifly explained previously on page [2] of the thread I provided a link to (above) with a code sample that I produced.CSS is extremely powerful, however many user-agents have been lazy at implementing the rules and that's part of the reason things are in such a mess.I put the html, body { height:100% } hack into it, but I don't have Mozilla here at work to test it on so I thought you guys could give me some feedback.
<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/test.html">http://www.tarleton.edu/students/st_bos ... /test.html</a><!-- m -->
I also added a right menu div for links, and I will be adding an iframe for the content of the page.
I still don't know if this is good code, but it looks just like I want it in IE6.
FWIW I came across one of the United Stated CIA's webpages while doing some research, and it has the same design I am going for and geuss what... they used tables!
<!-- m --><a class="postlink" href="http://www.cia.gov/cia/publications/factbook/geos/li.htmlAre">http://www.cia.gov/cia/publications/fac ... li.htmlAre</a><!-- m --> your servers down at the moment?
(the link doesn't work at the moment)link has changed actually...
<!-- m --><a class="postlink" href="http://www.tarleton.edu/students/st_bostick/temp/">http://www.tarleton.edu/students/st_bostick/temp/</a><!-- m -->
consequently though, I do think the server was down this morning for a big upgrade. should be back up now.It is back up now.
And mozilla is fine - 1.1a and 1.4. So's Opera 7.1. The only think is they're all longer than 100%. but it doesn't matter.