How do you position a navigation menu to the left of the main section?
My site has three div elements:
--------------------HTML---------------------
<body>
<div id="navigate">
<a href="./">Home</a>
<a href="bla/">Bla</a>
<a href="links.html">Links</a>
</div>
<div id="main">
<h1>Homepage</h1>
Welcome to my homepage!
</div>
<div id="footer">
</div>
</body>
--------------------HTML---------------------
(You can see the real homepage at http://jolowicz.com.)
These should be positioned as follows:
,------. ,---------------.
| nav | | |
| iga | | |
| te | | main |
`------' | |
| |
| |
| |
`---------------'
,--------------------------.
| footer |
`--------------------------'
My problem is that I don't know how to align the top of navigate and
main. The stylesheet below works well for Mozilla 1.7.5, but not for MS
IE. A friend says defining #navigate { [...] top: 1.4em; left: 0.8em; }
makes it look right in MS IE, but these dimensions don't actually align
on Mozilla. Another possible fix would be to position both navigate and
main absolutely, but then footer would be displayed below main (at the
top of the page).
By the way, is it OK to make navigate { position: absolute } without a
surrounding div which is { position: relative } ? Originally, main and
navigate were contained in a div corpus which was { position: relative
}, but this was reported to not work on MS IE :-( AFAIK, you need a
container which is { position: relative } as a reference for elements
with { position: absolute }.
---------------------CSS---------------------
/* Defines style for positioning */
body { padding: 0.5em }
#navigate {
position: absolute;
width: 8em; /* use the left margin in main */
}
#main {
margin-left: 10em; /* leave space for navigate */
}
#footer {
margin-top: 1em;
}
#navigate, #main, #footer { padding: 0.5em; }
#navigate a {
display: block;
margin-bottom: 0.3em;
}
---------------------CSS---------------------
--
,= ,-_-. =. Claudio Jolowicz
((_/)o o(\_)) http://www.jolowicz.com
`-'(. .)`-'
\_/
