Greetings. I have a couple of questions concerning CSS layouts, as
apposed to the old <tablemethod for creating layouts [1]. Even after
spending the last few days searching all over Google Groups, I haven't
not been able to find a solution to my collective dilemma, and I hope
some of you fine folks here in these neck of the UseNet woods might be
able to share some wisdom with a fellow coder.
My questions are in regard to what are the proper techniques for what I
want to accomplish, and also I urge anyone who is wishes, to critique of
my code at will. I welcome this. Even as a programmer and technologist
for some time [2], I am not afraid to admit there are still many things
I have yet to learn :-)
Consider this skeleton code I have written:
Skeleton Code, re-formatted for 72 column viewing
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Div Test</title>
<style type="text/css">
body { text-align: center;
color: #000000;
background-color: #FFFFFF; }
#wrap { padding: 10px;
border: #000000 2px solid; }
#header { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }
#body { ; }
#footer { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }
#content { border: #CCCCCC 2px solid;
padding: 10px; }
#content .item { text-align: left;
border: #000000 1px solid;
padding: 3px;
overflow: auto; }
#left { ; }
..sidebar { border: #CCCCCC 2px solid;
padding: 10px;
overflow: auto; }
..sidebar .menu { border: #000000 1px solid;
padding: 4px 10px 4px 10px; }
..sidebar .menu .item { text-align: center;
border: #CCCCCC 0px solid;
border-bottom-width: 2px;
padding: 3px; }
..sidebar .menu .item-last { text-align: center;
border: #CCCCCC 0px solid;
padding: 3px; }
..spacer-v { padding: 10px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
Title
</div>
<div class="spacer-v"><!-- No Content --></div>
<div id="body" align="left">
<div id="left" class="sidebar" style="width: 141px;">
<div id="main-menu" class="menu">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item-last">Item 3</div>
</div>
</div>
<div id="content" style="margin-left: 175px;">
<div class="item">
Some Content.....
</div>
<div class="spacer-v"><!-- No Content --></div>
<div class="item">
Some more<br>
content
</div>
</div>
</div>
<div class="spacer-v"><!-- No Content --></div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Now, these are my questions:
1) Currently, as written, the #content <divsits on the vertical
plane just after the bottom of the #left <div>, though #content,
through the use of margin-left, is offset to the right of #left.
The question here is what is the best way to get #left and
#content's top sides to be equal on the vertical plane (so
that are lined up, effectively side by side, kind of like a
two column <table>?
I've considered using { float: left; } but this seems problematic
as when #content's height is less than that of #left, then #left
ends up over lapping the #footer <divinstead of push it's
space worth like it does as written above.
In other words, I want essentially how it is currently, but
with the #left and #content lined up vertically.
2) Secondly, I am also having great difficulty try to find a way,
using CSS, to cause the #left and #content to expand downward to
consume all available space, just like a two column <tablewould.
In other words:
(Figure 1)
+---------------------------+
| +-----------------------+ |
| | Title | |
| +-----------------------+ |
| |
| +-----+ +---------------+ |
| | M | | contents... | |
| | E | | ... | |
| | N | | ... | |
| | U | | ... | |
| | | | ... | |
| | | | ... | |
| | | | ... | |
| | | | end content | |
| +-----+ +---------------+ |
| |
| +-----------------------+ |
| | Footer | |
| +-----------------------+ |
+---------------------------+
As well as this:
(Figure 2)
+---------------------------+
| +-----------------------+ |
| | Title | |
| +-----------------------+ |
| |
| +-----+ +---------------+ |
| | M | | contents... | |
| | E | | ... | |
| | N | | end content | |
| | U | | | |
| | | | | |
| | etc | | | |
| | etc | | | |
| | ... | | | |
| +-----+ +---------------+ |
| |
| +-----------------------+ |
| | Footer | |
| +-----------------------+ |
+---------------------------+
In a nut shell: In fig. 1, #content has a greater height then
#left since #content has more, well, content :)
In fig. 2, it's the opposite, #left has the greater height.
So, hat I want to happen is the bottoms to "push" downward as
much as possible to fill any void between them and #footer.
Those are my questions. Again, any critiques of my base code I have
written are more than welcome, as pure-CSS is sort of a new step for me,
at least in the layout department (like many, I have been using CSS for
years for many formatting purposes more and more.)
Thanks immensely for any help and guidance.
* * * * * * * * * * * * * * * * * *
[1] Like the all too well known 90-100-ish% width <table>/page
wrapper, which is what I had grown accustomed to over the
years since I first started HTML in 1997, as it was
commonly employed back in those days, albiet I do
understand the reason.
[2] I like to think of my self as some what experienced, having
learned a lot since first diving into programming in the mid
1990's, in addition to having grown up with computers.
* * * * * * * * * * * * * * * * * *
--
Stan
* If emailing a reply, please use stan^blz/hmrprint/com,
* after properly converting it into a legal address :-)
