I have a site that I laid out with tables, and lots of grotty hacks
and lots of markup generated by client-side javascript.
I'm in the process of converting it to "nice" CSS code but have
got stuck on a couple of issues.
My pages are going to be used in a situation with fixed viewport
(1024x768) and Mozilla browser -- so there are no resizing /
browser issues to worry about.
My basic page layout is:
<BODY>
<DIV id="header"> ...stuff... </DIV>
<DIV id="general"> ...stuff... </DIV>
<DIV id="footer"> ...stuff... </DIV>
<BODY>
I have positioned the footer with:
#footer { position: absolute; bottom: 10px; width: 98% }
and no special styling for the header.
Now I would like the "general" section to be all of the empty
space (ie. start at the bottom of Header, and end at the top
of Footer). So that I can then position stuff inside the empty
area. How do I do this?
The height of the section will change depending on what the
actual content of Header and Footer are, so I can't just make
it a fixed size.
Second question: suppose we have solved the above problem and
now have the "general" section. The general section will contain
two subsections:
<DIV id="general">
<DIV id="stuff1"> ...stuff... </DIV>
<DIV id="stuff2"> ...stuff... </DIV>
</DIV>
and these sections are both { width: 100%; height: 150px }.
I would like to position these two sections evenly within
the "general" space. One way to do this is with a table-based
layout:
<DIV id="general">
<TABLE width="100%" height="100%">
<TR><TD><DIV id="stuff1"> ...stuff... </DIV></TD></TR>
<TR><TD><DIV id="stuff2"> ...stuff... </DIV></TD></TR>
</TABLE>
</DIV>
This seems to work OK. Is it the recommended solution or is
there a better way of doing vertical alignment?
Now for the tricky part. Depending on the GET parameters in
the URL, sometimes I will only have "stuff1" visible, sometimes
I will only have "stuff2" visible, and sometimes both will be
visible. If only one is visible, then it should be vertically
centred within the "general" space.
The only solution I have so far is to output the entire code block
above with some JavaScript, and then I can just not output one of
the table rows if it is not to be used, and then the other row
is correctly centred. But this seems very ugly to me.
I tried attaching a { visibility: collapse } to the code above:
<TR style="visibility: collapse"> ....
That made the row contents disappear, but then the other row
was NOT centred. It moved a little towards the centre from where
it was, but that's all.
