Buongiorno,
non riesco a capire perchè riducendo la larghezza del browser il corpo del testo (DIV "content") si sovrappone al menu verticale (DIV "menu") .
Potreste aiutarmi per favore?
Grazie mille!

codice HTML:
<body>
<div class="container">
    <div id="menu">
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="ChiSiamo.htm">About</a></li>
            <li><a href="Archivio.htm">Archivio</a></li>
            <li><a href="Contatti.htm">Contatti</a></li>
        </ul>
    </div>

    
    <div class="content" align="justify">
        <p>testo della pagina....</p>
    </div>

<div id="background">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="images/sfondo1.jpg" id="bgk" alt="" /> </td>
        </tr>
    </table>
</div>
</body>
CSS:
codice:
* {
    margin:0;
    border:0;
    padding:0;
}

body {text-align: center;}

#menu ul{
    width:100px;
    background:rgba(255,255,255,0.25);
    float:left;
    display:inline;
    position:fixed;
    top:0;
    left:0;
    font-family: Verdana, Arial;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#menu li a {
  color: rgb(255,255,255);
  display:block;
  line-height: 40px;
  height: 40px;
  width: 100px;
  text-align: center;
  text-decoration: none;
}
 
#menu li a:hover, #menu li a.active {font-weight: bold;}

html, body,#backgound,#background table,#background td{
    width:100%;
    height: 100%;
    background-color:transparent;
    color:rgb(0,0,0);
    overflow:hidden;
}

.container{
    width:100%;
    height: 100%;
    position:relative;
    top:0;
    left:0;
    z-index:1;
    overflow:auto;
}

.content{
    margin:0 auto; 
    width: 964px ;
    overflow:auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 100px;
    border-left: 0;
    border-right: 0;
    font: 10px Verdana, Arial;
    background: rgba(255,255,255,0.25) ;
    text-aling: left;
}

#background {position: fixed;}

#background td{
    vertical-align:middle;
    text-align:center
}


#background img{
    min-height:50%;
    min-width:50%;
    margin:0 auto
}

#background, #bgk{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
}