• User Newbie

    Layaut che non segue contenuto

    Salve allora ho un piccolo problema, ho un layaut a due colonne, la lunghezza della colonna di sinistra si allunga quando si apre uno dei sottomenù, il problema è che se si allunga una colonna vorrei far allungare anche il layaut e l'altra colonna, vi posto il codice

    Il codice html
    [HTML]
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    </head>
    <div id="layaut">
    <div id="logo">
    <div id="partner"><p>Il nostro gruppo</p><a href="">Siervo Plast </a><br><a href=""> Siervo Rappresentanze </a></div>
    </div>
    <div id="menu">
    <ul>
    <li style="border-left: 0px;"><a class="primo" href="">Home</a></li><li><a href="">News</a></li><li><a href="">Chi Siamo</a></li><li><a href="">Contatti</a></li><li><a href="">Dove Siamo</a></li><li><a href="">Partner</a></li>
    </ul>
    </div>
    <div id="menulat"><div id="intro"></div><div id="prodotti"></div>
    <div class="prod">
    <li id="p1" class="menu"><img src="" border="0" style="position:relative;left:55px"></li>
    <ul id="s1" class="links">
    <li><a href="#"><h2>Ciniglia</h2></a></li>
    <li><a href="#"><h2>Ecopelli</h2></a></li>
    <li><a href="#"><h2>Velluti</h2></a></li>
    <li><a href="#"><h2>Damascati</h2></a></li>
    <li><a href="#"><h2>Stampati</h2></a></li>
    <li><a href="#"><h2>Microfibra</h2></a></li>
    <li><a href="#"><h2>Jacquard</h2></a></li>
    <li><a href="#"><h2>Satin</h2></a></li>
    <li><a href="#"><h2>Canape</h2></a></li>
    <li><a href="#"><h2 style="font-weight: bold";>STOCK</h2></a></li>
    </ul>
    <hr style="color: #FFF; width: 50%;margin-left:45px;">
    <li id="p2" class="menu"><img src="" border="0" style="position:relative;left:52px"></li>
    <ul id="s2" class="links">
    <li><a href="#"><h2>Ricamati</h2></a></li>
    <li><a href="#"><h2>Devore</h2></a></li>
    <li><a href="#"><h2>Bucle</h2></a></li>
    <li><a href="#"><h2>Misti-Lino</h2></a></li>
    <li><a href="#"><h2>Organze</h2></a></li>
    <li><a href="#"><h2>Stropicciati</h2></a></li>
    <li><a href="#"><h2>Oscuranti</h2></a></li>
    <li><a href="#"><h2>Rasi</h2></a></li>
    <li><a href="#"><h2>Taftà</h2></a></li>
    <li><a href="#"><h2>Fantasie</h2></a></li>
    <li><a href="#"><h2>Giro Inglese</h2></a></li>
    <li><a href="#"><h2>Teli Ricamati</h2></a></li>
    <li><a href="#"><h2>Ignifughi</h2></a></li>
    <li><a href="#"><h2>Stampati</h2></a></li>
    </ul>
    <hr style="color:; width: 50%;margin-left:45px;">
    <li id="p3" class="menu"><img src="" border="0" style="position:relative;left:55px"></li>
    <ul id="s3" class="links">
    <li><a href="#"><h2>Per Tappezzeria</h2></a></li>
    <li><a href="#"><h2>Per Tendaggi</h2></a></li>
    </ul>
    <hr style="color:; width: 50%;margin-left:45px; ">
    </div>
    <div id="news"></div>
    <div class="prod"></div>
    </div>
    <div id="contenuti"></div>
    </div>
    <div id="footer"></div>

    </html>[/HTML]

    Il css

    
    /*Reset */
    
    /*-------------------------Layaut Pagina--------------------*/
    div#layaut{
        width: 930px;
        height: auto !important;  /* per i browser moderni */
        height: 500px;      /* per IE5.x e IE6 */
        min-height: 500px;  /* per i browser moderni */
        margin: 0 auto;
        background-color: #fff;
        clear:both
    }
    div#contenuti{
        float: left;
        display: inline;
        margin-top: 1em;
        margin-left: 2em;
        width: 688px;
        height: auto !important;  /* per i browser moderni */
        height: 340px;      /* per IE5.x e IE6 */
        min-height: 340px;  /* per i browser moderni */
        background-color: #EEE;
    }
    div#footer{
        display: block;
        height: 15px;
        width: 930px;
        margin: 0 auto;
        background-color: #cb2726;
    }
    /*--------------------------Fine Layaut----------------------*/
    /*----------------------------Logo---------------------------*/
    div#logo{
        height:97px;
        background-color: transparent;
        background-image: url(../img/logo.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        border-top: 2px solid #bf0101;
        border-left: 2px solid; 
        border-right:2px solid; 
    }
    div#partner{
        position: relative;
        margin-right: 0px;
        padding-right: 1.3em; 
        margin-top:1em;
        float: right;
        height: 72px;
        width: 190px;
        font-family: "Arial" serif;
        font-size: 16px;
    }
    div#partner p{
        font-weight: bold;
        padding-bottom: 7px;
        text-align: right;
    }
    
    div#partner a{  
        color:#000;
        text-align: left;
    }
    /*-----------------------------Fine Logo----------------------------*/
    /*----------------------Inizio Menù superiore-----------------------*/
    div#menu{
        float: left;
        border: 2px solid;
        padding-top:6px;
        padding-bottom:7px;  
        text-align: center;
        width: 926px;
    }
    div#menu ul{
        list-style:none;
        overflow:hidden;
        width:100%;
        display: inline;
    }
    div#menu li{
        border-left: 1px solid #C0C0C0;
        display:inline;
    }
    div#menu a.primo{
        margin-left:0;
    }
    div#menu a{
        margin-right:1.4em;
        margin-left:1.4em;  
        text-transform:uppercase;
        text-decoration:none;
        color:#000;
        font-family: 'Lato', arial, serif;
        font-size: 14px;  
    }
    div#menu a:hover{
        color:#656565;   
    }
    
    /*----------------------Fine Menù superiore---------------------*/
    /*----------------------Menù Laterale---------------------------*/
    div#menulat{
        float: left;
        display: inline;
        margin-top: 1em;
        width: 210px;
        height: 600px;
    }
    div#menulat div{
        width: inherit;  
    }
    div#intro{
        background-repeat: no-repeat;
        background-color: transparent;
        background-image: url(../img/Space.jpg);
        height: 45px;
    }
    div#news{
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 20px top;  
        background-image: url(../img/News.jpg);  
        margin-top: 0.3em;
        height : 15px;
        display: block; 
    }
    div#prodotti{
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 20px top;  
        background-image: url(../img/Prodotti.jpg);      
        margin-top: 0.3em;
        height : 15px;
        display: block;
    }
    div.prod{
        margin-top: 0.3em;
        background-color:;  
        padding: 0.3em 0 0.2em;
        height: auto !important;  /* per i browser moderni */
        height: 120px;      /* per IE5.x e IE6 */
        min-height: 120px;  /* per i browser moderni */
    }
    .menu{
      margin-top:0.5em;
      text-decoration: none;
      list-style:none;  
      cursor: pointer;
    }
    /*----Sottomenù---*/
    .links{
        cursor:pointer;
        text-align:left;
        margin-top: 0.3em;
        margin-left: 4em;
    }     
    .links a{
        color:#000; 
        text-decoration: none;}
    .links a:hover{
        text-decoration: underline;}
    h2{
        font-size: 1em;
        font-weight: 500;
        line-height: 1.5;
        font-family: 'Quattrocento', arial, serif;    
    }
    /*---------------Fine Menu Lat--------------*/
    

    Il javascript

    $().ready(
      function() {
        // nascondo tutti i sottomenu
        $("#s1").hide();
        $("#s2").hide();
        $("#s3").hide();
        // mostro i sottomenu del blocco principale 1
        $("#p1").click(
          function() {
            if ($("#s1").is(":hidden")) $("#s1").slideDown(); else $("#s1").slideUp();
            if ($("#s2").is(":visible")) $("#s2").slideUp();
            if ($("#s3").is(":visible")) $("#s3").slideUp();
          }
        );
        // mostro i sottomenu del blocco principale 2
        $("#p2").click(
          function() {
            if ($("#s1").is(":visible")) $("#s1").slideUp();
            if ($("#s2").is(":hidden")) $("#s2").slideDown(); else $("#s2").slideUp();
            if ($("#s3").is(":visible")) $("#s3").slideUp();
          }
        );
        // mostro i sottomenu del blocco principale 3
        $("#p3").click(
          function() {
            if ($("#s1").is(":visible")) $("#s1").slideUp();
            if ($("#s2").is(":visible")) $("#s2").slideUp();
            if ($("#s3").is(":hidden")) $("#s3").slideDown(); else $("#s3").slideUp();
          }
        );
      }
    );
    

    Sono alle prime armi quindi se avete anche consigli sono sicuramente ben accetti, ringrazio in anticipo chi risponderà