Primarily, be cautious when using position: absolute as it may cause undesirable effects. It is best to avoid it unless necessary for elements to be taken out of the page flow (such as layering one element on top of another).
Furthermore, the property height: 100% does not behave as expected intuitively. Instead of setting the height of the menu div to 100% of the entire page, it actually sets it to 100% of the viewport's height (the browser window).
If your menu has a simple background, there is a clever trick you can employ to make it appear to have the same height. You can visit this link for an example: CSSDesk
To achieve this effect, I have added a wrapper div around your menu and content. Here are the relevant portions of HTML:
<body>
<div id="Fascione">
<img id="FotoAngolare" alt="ChiesaEsterno" src="images/esterno.jpg" width="195" height="122">
<div id="Impressum">
<span class="Intestazione">Missione Cattolica Italiana</span><br>
<span class="Titolo">Chiesa "Madonna degli Emigrati"</span><br>
<span class="Testo">Bovetstrasse 1 - 3007 Bern<br>Tel. 031 371 0243 / Fax. 031 372 1656</span><br>
<a class="Email" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a070319190305040f44080f18040b2a08061f0f1d0304440902">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b565248485254555e15595e49555a7b59574e5e4c5255155853">[email protected]</a></a>
</div>
</div>
<div id="wrap">
<div id="Menu">
<a href="top"></a>
<ul id="MenuList" class="Testo"></ul>
<div id="Contenuto">
<p></p>
</div>
</div>
</body>
The styling applied to these elements is as follows:
#wrap { background: #e8e8e8; }
#Menu {float:left; width:195px; }
#Contenuto { background: #fff; border-left: 2px solid black; margin-left: 196px; min-width:829px; padding: 1px 1px 1px 15px; }
This setup ensures that the entire content area has a gray background. The menu is floated left over the gray background while the content div clears the menu with a left margin of 192px and a white background. The wrapper and content divs expand to accommodate the size of your content.
A couple of additional tips:
- Exercise caution when using
height: 100%.
- Remember that
float: left or float: right inherently set display: block, so you cannot use display: inline on floated elements.