Fri, 2005-12-09 15:11
Hello, I have this problem and I'm not quite sure what's wrong. I was hoping someone would be kind enough to help me out. I've uploaded a sample page with a description of the problem here:
I could really use the help! 
Fri, 2005-12-09 15:43
#1
(Problem Solved - Thread Closed) Div Layout Problem
eupak we need to ask that you observe the forum guidelines for posting namely that one incudes a DTD in the page to ensure that browsers are in "Standards Mode"
Are you using position absolute for a reason? and are you aware that one shouldn't use position absolute to layout pages?
If you could fix the page up with a Doctype and have a think about why your using position absolute and if not for a particular reason then try going with the flow of the elements using default positioning static, and post back.
Hugo.
Fri, 2005-12-09 16:16
#2
(Problem Solved - Thread Closed) Div Layout Problem
sorry, i was in a bit of a hurry and didn't read the forum guidelines.. what's a DTD? and what's doctyle? (the doctype site link you gave seems to be dead..)
and, no, i wasn't aware that one shouldn't use absolute positioning to layout pages.. how do you keep a certain number of pixels distance from different "windows/boxes/elements (not quite sure how to refer to them" in a page without using absolute positioning?
sorry, but i'm fairly new to this.. and this site.. (look! this is first post! 
) the reason i was here was because i was stumped.. and i did think about it, trust me. it's after hours of hair pulling frustration that i'm here..
i had a look at your post about validation.. and thanks for the tip - it's very cool! think i'll use it lots in the future.. but i'm afraid i'm on a bit of a deadline so i don't have time to validate if it means looking at and fixing 134 errors.. well i did try the css validator and fortunately it validates as css.. (oh how nice, i can now add a little logo )
if anyone is nice enough to take a look.. please do so and tell me what's wrong...
-- edit --
ah, the doctype.. yes, i remember.. the very top part of the html.. i erased it because it didn't seem necessary.. you see.. i deleted all the things i thought was unnecessary so that people would not have to look at more code than was er.. necessary.. is the doctype, er, necessary right now? i really don't think it has anything to do with my problem...
incidentally, is there a version of the validation tools that i can download and use without having to have an internet connection?
-- edit --
oh, this is interesting. i've taken your advice and started reading the guidelines and i came across:
oh, and i've been reading the guidelines, now that you mention it, and i'd like to point out...
"2. The question of DTD (DocTypes) rears its head quite often, if you feel compelled to mention the lack of DTD please consider first whether it is actually germane to the question in hand and if you decide that it is please guide the poster to the relevant help on the subject either in the 'How To' section or in off-site links." - how to reply announcement by guru Tony
from one guru to another, eh?
anyway, i am pleading for some help, anyone! i would be most grateful!
Fri, 2005-12-09 17:10
#3
(Problem Solved - Thread Closed) Div Layout Problem
To all intent and purpose DTD and Doctype are the same thing.
The link seems fine :?
You need to have this bit of code at the very top of your page nothing before it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This will switch browsers into standards mode rather than quirks mode which means that they will follow the specs for CSS in a more uniform fashion especially IE which in quirks mode presents a number of problems with CSS chief amongst them, using the broken box model and not recognizing certain properties such as margin auto.
With the layout I'm not sure what your trying to achieve in it's basic form #menu would constitute an overall container the header would be nested within this no positioning needed the #middle div would follow the header agin no positioning no height so that it would expand, the footer would follow after the #middle always positioned bellow the height of the #middle your #menu or container would be whatever height needed as dictated by #middle and footer heights.
You could of course get the #menu to actually take up a height 100% of the viewport window and to expand beyond that if required you could also set the footer to always be at the bottom of the viewport regardless of the height of the #middle or just let it's position be dictated by the height of #middle.
Your requirement for space should be controlled by margins but I'm not exactly sure what your after here, adding margin-bottom to #bottom will give space before the end of the #menu div.
prepare the page with the DTD provided and if possible explain a little more what your trying to do with this group of elements; is this part of a larger layout?
Hugo.
Fri, 2005-12-09 18:07
#4
(Problem Solved - Thread Closed) Div Layout Problem
done! i've added the doctype..
i'm sorry if i didn't explain myself well enough, i will now try to explain it better.
thanks for replying!
--- edit ---
ah!! i got it to work now! i deleted all the unnecessary attributes (positioning, top, left...) and it now works! well, thank you! i think it was your "..no positioning needed.." comment that got me thinking! in future, i will take care to only use the necessary attributes (i have a habit of copying and pasting (elements? the id definition things.. not sure what they are called) and only modifying things that i deem relevant.. obviously a bad habit!
and point taken about the doctype! though it wasn't relevant in this particular case (as i mentioned before, i took out the doctype in addition to all the other unnecessary bits to show the problem more clearly..), i see that it could create problems!
anyway, thanks for taking the time to actually look at my code
-- edit ---
oh, i do have one question:
are all values, by default, 0?
i wouldn't really have to define a 0px padding everytime, do i? not like for table borders that have a default of 1?
actually, i managed to find out most of the default values for css.. but what of classes? let's say classes for normal html.. like. cellpadding.. would i have to specify 0? or does the creation of a class default it to 0?
Fri, 2005-12-09 19:18
#5
(Problem Solved - Thread Closed) Div Layout Problem
Glad to know you have it sorted and thanks for changing title to "resolved".
Don't be fooled by the apparent lack of difference that you may perceive with or without DTD yes it can have no perceptible difference depending on the CSS rules in use and the well formdness of your markup, but IT IS NECESSARY and when you validate pages you must have it for the validator to reference your markup against and you should always code to standards and this does mean always including Doctype, always even in a minimal test case situation.
One thing I meant to ask was why you were positioning the elements so far down the page but you seem to have figured out that problem, position absolute has it's uses but generally not for major layout elements, unless there is good reason one uses the default position of static which flows the element after the last one one then uses floats to position nested children generally.
Copying and pasting rules is likely to cause problems as those rules will be particular to the original layout but as you get use to properties you will write the rules from scratch according to your needs, the most important thing to understand initially are the positional properties and how they behave along with the "Box Model" and the difference between block level elements and inline ones.
All values are not by default '0' many values are preset, but one would need to define what values we were talking about. Block level elements that is DIV, P, H#, UL, DL etc have by default margins as these elements are designed to occupy their own lines in a document so they by default take up the full width of the viewport/body and have top/bottom margins that allow spacing between these elements, if you add these elements to the markup with no rules then each will be on it's own line following in the order they were written (the flow)
A class or ID selector does not have any default rules as it is not an element it is just a way of linking a set of rules to an element using an ID(identifier) or class allowing for specific rules to be defined to an element such as a div rather than have those rules applied to all divs
A now popular technique for dealing with default block values is to zero them out globally using the star selector as in * {margin:0;padding:0;} this means gets round the problem of browsers using different default values and allows you to set your margins padding when you need them and to know that they will be uniform across browser.
Hugo.
Fri, 2005-12-09 19:41
#6
(Problem Solved - Thread Closed) Div Layout Problem
Oh have just read your edit to your second post! It makes more sense and avoids confusion if you don't edit previous posts to that degree as it breaks the flow of the thread.
Quote:
"2. The question of DTD (DocTypes) rears its head quite often, if you feel compelled to mention the lack of DTD please consider first whether it is actually germane to the question in hand and if you decide that it is please guide the poster to the relevant help on the subject either in the 'How To' section or in off-site links." - how to reply announcement by guru Tony
from one guru to another, eh? Very Happy
Oh dear
in actual fact I was responsible for a major ish re-write to those two forum guideline stickies and that section in particular was added by myself, I actually have posted at length and debated the issue of members pointing out lack of DTD and whether it is relevant to the problem mentioned quite often and have made a point of trying to get across to members that they are not to raise the question of DTD unless it is directly pertinent or mentioned as a parting aside to resolving the problem. It is a case that only a handful of members truly understand Doctype issues and are qualified to hold fourth on the subject, and I'm one of them Tony incidentally is the forum owner/administrator and rightly lends his name to those guidelines.
When code is presented without one it is always likely to be mentioned especially if we get the impression that the poster may not understand the use of the Doctype, when snippet code is presented and is clearly not part of a layout but just used to highlite an issue then mentioning doctypes would not be pertinent and we would consider it a given.
As for validator tools the best thing to be using is Firefox for checking your code/pages along with the HTML-Tidy plugin which will allow constant checking of the code at the click of an icon it will show all the warnings/errors that it finds and can even clean them up within reason.
Hugo.