Home/ Questions/Q 7018403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T23:02:47+00:00

I am not a professional web-developer but I am designing one to help out

  • 0

I am not a professional web-developer but I am designing one to help out a no-profit organization.
I spent a couple of days searching the web for instructions and explanations on css, float, position, etc. Finally I managed to design the layout I wanted with the behaviour I wanted but there is still something that is not working/I do not understand.
Please, see the page at: “http://www.missione-berna.ch/index2.php” and its source; I put all the code in it to make it accessible (at the end stiles, scripts, menu and header will be in separate files included eventually via php).
How come that my “Menu” div is neither the size of its content nor the size of the neighbour “Contenuto” div?
I understood that it is not an easy task to have the height of two div column match, but where is this “mid-way” size coming from?
Any help appreciated, thansk in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, position: absolute can be a Very Bad Thing. Avoid it unless trying to take elements out of the flow of the page (having one element appear on top of another).

    Second, height: 100% does not do what, intuitively, you’d think it does. You’re setting the height of the menu div to 100% of the viewport’s height (your browser window), not 100% of the entire page.

    Since your menu has a simple background, there’s a neat trick you can use to make it appear to be the same height. CSSDesk

    I’ve added a wrapper div around your menu and content. Relevant bits 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:missione.berna@bluewin.ch">missione.berna@bluewin.ch</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>

    And styled it like so:

    #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; }

    So the entire thing has a gray background. Your menu is floated left (over the gray background). The contentuo div has a left margin of 192px to “clear” the menu, and has a white background to hide the gray. The wrapper and content divs, and thus the gray/white backgrounds, will expand to the size of your content.

    A couple tips:

    1. Be careful with height: 100%.
    2. float: left or float: right
      inherently set display: block. You can’t set display: inline on
      floated elements.
    • 0