Problema di Wrapper in Css

[damien_sbs]

Ciao a tutti, scrivo per chiedere per risolvere un problema con un WRAPPER all'interno del mio sito Internet in HTML, premetto che non uso alcun programma di editing e che si tratta di un sito statico interamente fatto in HTML e CSS...

Il problema e il seguente, il sito e composto da un wrapper, una side a destra un content al centro e una side a sinistra, allora se al wrapper do un'altezza definita svolge il suo dovere, ma visto che i contenuti delle pagine variano e vorrei utilizzare un css unico quando do il comando height:auto; automaticamente il wrapper sparisce lasciando i div delle 3 colonne fuori dal contenitore...

Come dicevo per una buona visualizzazione del sito tutto deve essere contenuto da un wrapper che si adatti in base ai contenuti come le varie colonne al suo interno... ma dando il comando auto sembrerebbe che al suo interno ci sia solo la Header e il menu...

Spero qualcuno mi possa aiutare a risolvere questo rompicapo!!

Vi ringrazio anticipatamente

[Nobody33]

Link alla pagina?

[Mich_]

La mia palla di cristallo mi dice che ti manca il clear (o altra tecnica per chiudere il float).

...Pero` la palla di cristallo non ha visto il tuo codice ...

[damien_sbs]

Scusa, hai ragione, visto l'ora tarda mi sono dimenticato della cosa piu importante... eccoti il codice del css utrilizzato Grazie Mille!!!

@charset "utf-8";
/* CSS Document */

* {
	text-align: left;
	margin-top: 0;
	margin-bottom: 0px;
	padding: 0;
  }

  
#wrapper { 
		 
		 width:980px;
		 height:1200px;
		 margin:0 auto;
		 background-color:#000;
		 border:solid #333 2px;
		 -moz-box-shadow:0 4px 4px #000;
	     -webkit-box-shadow: 0 4px 4px #000;
	     box-shadow:0 4px 4px #000; */
		 position:absolute;
         }
  
header, footer, content, aside, aside1 {
	/* resetto tutto a block */
	display:block;   
     }

header h1 {
	       position:absolute;
           left:-5000px;
          }

 
header { 
         /*margin-top:20px; */
         margin-left:55px;
		 width:868px;
		 height:486px;
		/* border:solid #999 2px;
		 -moz-box-shadow:0 4px 4px #000;
	     -webkit-box-shadow: 0 4px 4px #000;
	     box-shadow:0 4px 4px #000; */
		 position:relative;
		 }
		 
/* tipografia, colori e regole per voci di primo livello, titoli e link */

div#menu nav{
          width:868px;
		  height:43px;
	      top:30em;
          background-color:#000;
		  position:absolute;
		  overflow:hidden;}
ul#nav,ul#nav li,ul#nav ul{margin:0;padding:0;list-style:none}
ul#nav{width:868px;margin: 0 35px;height:43px;
background-color:#000;
    font: 70%/1.5 Verdena,Tahoma,sans-serif}
ul#nav a{display:block;text-decoration:none}
ul#nav h2{font-size:110%;margin:0}
ul#nav h2 a{line-height:25px;padding: 0px;}
/*ul#nav>li:hover,ul#nav h2 a:hover{background: #5092F2}*/
ul#nav h3{ font:Arial, Helvetica, sans-serif; font-size: 9px; margin: 3px}
ul#nav h3 a{color: #666;}
ul#nav h3 a:hover{text-decoration:underline}
ul#nav li{float: left;position: relative}
ul#nav li li{float: none;display: block !important;display: inline; /*IE6*/}


/*dichiarazioni chiave per i sottomenu e l'effetto a comparsa
NB: classe open è necessaria per JQuery*/

ul#nav div.mega{position: absolute;top: -9999px;left: -1px;
    width: 10em;padding: 0.2em; background-color:#000;
	overflow:hidden;line-height:1.5}
ul#nav li:hover div.mega,ul#nav li div.mega.open{top: 43px;z-index: 100}

/*tipologie di sottomenu:
small: colonna singola
mega: 2 colonne  - default
wide: 3 colonne
ultra: 4 colonne
alt: allineato sul lato destro */

ul#nav div.mega div{float:left;width:49%}
ul#nav div.mega.small{width:15em}
ul#nav div.mega.small div{float:left;width:99.9%}
ul#nav div.mega.wide{width:28em}
ul#nav div.mega.wide div{float:left;width:33%}
ul#nav div.mega.ultra{width:36em}
ul#nav div.mega.ultra div{float:left;width:24.9%}
ul#nav div.mega.alt{left:auto;right:-1px}

/*regole aggiuntive per i link dei sottomenu*/

ul#nav div.mega li a{padding:0 7px;color: #999;}
ul#nav div.mega li a:hover{color: #FFF;text-decoration:underline}		 
		 


							   
a:link, a:visited {
	opacity: 1;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	text-decoration: none;
	outline: none;
     }
	 
a:hover { 
         opacity:1;
		 color:#F00;
 	     text-decoration:none;
     }							   
							   
							   
body {
	background-image: url(../img/bg.jpg);
	font-size: 12px;
	color: #999;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-background-size: cover;
	-moz.bacground-size:cover;
	-o-background-size: cover;
	-background-size: cover;
	   
	  }

		 

article {
	     background-color:#;
		 overflow:hidden;
		 padding:25px;
       }

	   
		
figure { width:203px;
         height:130px;
		 float:right;
		 margin-left:10px;
		 margin-bottom:10px;
       }


		
#content { background:#000;
           border:solid #333 2px;
           margin-right:237px;
		   margin-top:20px;
           width:502px;
		   height:auto;
		   float:right;
		   -moz-box-shadow:0 4px 4px #000;
	       -webkit-box-shadow: 0 4px 4px #000;
	       box-shadow:0 4px 4px #000;
		   position:relative;
		      
         }
		 
	
aside { border:solid #333 2px;		
        margin-left:6px;
		margin-top:20px;
		margin-bottom:20px;
        width:220px;
		height:600px;
		float:left;
		 -moz-box-shadow:0 4px 4px #000;
	     -webkit-box-shadow: 0 4px 4px #000;
	     box-shadow:0 4px 4px #000;
		 position:relative;
		 
		 
      }
	  
	  
aside1 { 
        border:solid #333 2px;
		margin-top:75px;
		margin-bottom:20px;
		margin-left:750px;
        width:220px;
		height:600px;
		float:right;
		 -moz-box-shadow:0 4px 4px #000;
	     -webkit-box-shadow: 0 4px 4px #000;
	     box-shadow:0 4px 4px #000;
		 position:absolute;
		 
		 
      }
	  
#flash_container {
	               margin-left:20px;
				   margin-top:30px;
				   margin-bottom:20px;
				   opacity:1;
				 
				 
				 }


footer  {
	height: 50px;
	padding-top: 80px;
	padding-bottom: 30px;
	text-align: center;
	margin-top: 50px;
	font-size: 12px;
	clear: both;
       }	
	
 a.rollover {
	display:block;
	width:202px;
	height:130px;
	text-decoration:none;
	background:url(../img/rollover-1.png);
   }
   
 a.rollover:hover {
	  background-position: -202px 0;
     }
	 
	.displace {
		position:absolute;
		
}

 a.rollover_1 {
	display:block;
	width:202px;
	height:130px;
	text-decoration:none;
	background:url(../img/rollover-2.png);
   }
   
 a.rollover_1:hover {
	  background-position: -202px 0;
     }
	 
	.displace {
		position:absolute;
		
}



 a.rollover_2 {
	display:block;
	width:202px;
	height:130px;
	text-decoration:none;
	background:url(../img/rollover-3.png);
   }
   
 a.rollover_2:hover {
	  background-position: -202px 0;
     }
	 
	.displace {
		position:absolute;
		
}

#immagine {border:solid #F00 2px;
         }


	
	   
/* clearfix hack pulisce tutti i float */

.clear:after {
	          content:".";
			  display: block;
			  height: 0;
			  clear:both;
			  visibility:hidden;}

[Mich_]

Per favore:
1. correggi il messggio precedente inserendo i codice dentro i VBtag corretti (vedi regolamento)
2. inserisci anche il codice HTML cui si riferisce il CSS

Ma se hai la pagina in linea, e` piu` semplice anche per noi se posti il link

[damien_sbs]

Ok, scusa non ho visto, cmq la pagina non e online perche e un lavoro che sto facendo per una band quindi non mi hanno ancora fornito dominio ecc, ti incollo anche l'html della pagina

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Scream Baby Scream Official Webpage, Italian Horror Industrial Band">
<meta name="keywords" content="band, horror, music, video, official web page, scream baby scream, damien die, becky delirious, rendih, ryan terror, mark knox">
<title>SCREAM BABY SCREAM Official</title>
<link rel="stylesheet" href="css/style.css">





<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js>
</script>

       <style type="text/css">
       .clear {
               zoom:1;
               display:block;
              }
       </style>
       
       
<![endif]-->           
         
</head>



<body>

           
              
   <div id="wrapper">
   
        <header> 
        
                <h1>Scream Baby Scream Home</h1>
                
                [img]img/header.jpg[/img]  
                
               <!-- <div id="contact">
                                <ul>[*][img]img/fb_icon.png[/img][*][img]img/twitter_icon.png[/img][*][img]img/mail_icon.png[/img][/list]
                             </div>-->       
                       
                         
                  <div id="menu">
                            <ul id="nav">[*]
                                <h2>[img]img/bottoni/home.png[/img]</h2>
                            [*]
                               <h2>[img]img/bottoni/news.png[/img]</h2>[*][*]
                               <h2>[img]img/bottoni/band.png[/img]</h2>
                                <div class="mega small">
                                       <div>
                                        <h3>Biography</h3>
                                        <ul>[*]<h3>Damien Evil</h3>[*]<h3>Becky Delirious</h3>[*]<h3>Rendih IronScrap</h3>[*]<h3>Ryan T.3ror</h3>[*]<h3>Mark Knox</h3>[/list]</div>
                                </div>
                            [*]
                                <h2>[img]img/bottoni/tour.png[/img]</h2>
                            [*]
                               <h2>[img]img/bottoni/media.png[/img]</h2>
                                <div class="mega small">
                                       <ul>[*]<h3>Music</h3>[*]<h3>Videos</h3>
                                </div>
                            [*]
                                <h2>[img]img/bottoni/photo.png[/img]</h2>
                                [*]
                                <h2>[img]img/bottoni/store.png[/img]</h2>
                                [*]
                                <h2>[img]img/bottoni/contact.png[/img]</h2>
                                
                            </div>   
        
                       </header>
           
            <aside>
           
                 <div id=>
                      
                 </div>
                 
           </aside>
           
           
     <div id="content">
           
                 [img]img/contact.jpg[/img]</br></br>


                 <div style="margin-left:20px; margin-right:20px; margin-top:40px; margin-bottom:40px;">


                 

CONTACT: (press/booking/review etc) :info@screambabyscream.net</p>

               
              </div>
                 
           </div>
           
           <aside1>
           
                 <div id=>
                      
                 </div>
                 
           </aside1>
        
       
           
           
     
           <footer>
                
                <div class="line"></div>
                Corpyright© 2013 | Scream Baby Scream

                All Rights Reserved.
           
           </footer>
      </div>
      

 </body>

Grazie mille ancora!!!

[Mich_]

Cosi` non riesco a capire niente.
Non puoi usare un formato "umano"?

[damien_sbs]

Ci sto provando ma quando metto il codice tra [CODE] cmq nn mi da la possibilità di scroll dall'alto verso il basso

[Nobody33]

Puoi caricare tutto su uno spazio hosting gratuito, tipo altervista e poi posta il link.

Altrimenti, come ti è già stato detto, posta un codice pulito, ovvero ad ogni nuova riga che inizi, vai a capo della riga.

Inoltre, sarebbe di grande giovamento per noi postare solamente il codice essenziale, ovvero tralasciare tutti i fronzoli che non servono.

[damien_sbs]

Grazie comunque delle info, ne terrò presente se dovesse servire nuovamente, per quanto riguarda il mio problema sono riuscito a risolvere dando una pulita al codice e mettendo un semlice overfolw!! Mi e stata utile la risposta di mich!! Grazie comunque a tutti!!!