Container ed inner-container

[Aleinux]

Ciao a tutti, sto realizzando un sito internet ed ho un problema.
la pagina è composta in questo modo:
- navigazione
- container
- container-left
- container-center
- footer

Ogni volta che aggiungo del contenuto nel container-left p nel container-center, vorrei che il container che contiene questi ultimi due, ma non il footer, variasse la sua altezza in automatico. Purtroppo non mi succede. Mi succede che se inserisco del contenuto nel container-center, mi si sovrappone al footer, costringendomi ad impostare una height per il container. Io voglio che l'altezza del container vari in modo "dinamico". Come posso risolvere?
A seguire il codice in css

/*reset css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*fine reset css*/

body {
text-align: center;
color: #333;
font-family: 'Ubuntu', serif;
font-size: 48px;
font-weight: bold;
}

/*Inizio logo*/
#logo{
background-image: url(../images/sfondo-nav.png);
height:246px;
}
/*Fine logo*/

/*Inizio tasti navigazione*/
.nav{
width:900px;
margin: auto;
}
.inner-nav-1 {
margin: 0px;
float: left;
width: 364px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.home {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/top_menu_01.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 43px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 67px;
}
.home:hover {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #ed5400;
text-decoration: none;
background-image: url(../images/top_menu1_01.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 43px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 67px;
}
.tutorial {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/top_menu_02.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 45px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 27px;
}
.tutorial:hover {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #ed5400;
text-decoration: none;
background-image: url(../images/top_menu1_02.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 45px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 27px;
}
.about {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/top_menu_03.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 45px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 27px;
}
.about:hover {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #ed5400;
text-decoration: none;
background-image: url(../images/top_menu1_03.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 45px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 27px;
}
.contacts {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images/top_menu_04.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 84px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
}
.contacts:hover {
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
color: #ed5400;
text-decoration: none;
background-image: url(../images/top_menu1_04.png);
background-repeat: no-repeat;
margin: 0px;
float: left;
height: 26px;
width: 84px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
}
.inner-nav-2{
margin: 0px;
float: right;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
}
.icon{
margin-top: -10px;
}
/*Fine tasti navigazione*/

/*Impostazioni generali*/
a:hover{
color:#f30;
}
/*Fine impostazioni generali*/

/*Inizio Container*/

#container {
width: 900px;
min-height:378px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 80%;
}
#container-left{
background: #f8f3de;
color: #f30;
width: 20%;
margin: auto;
font-size: 18px;
float: left;
}
#container-center{
background: #f8f3de;
color: #f30;
width: 75%;
margin: auto;
font-size: 18px;
float: right;
}
.box{
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 10px #000000;
-webkit-box-shadow:0px 0px 10px #000000;
box-shadow:0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
marquee{
padding: 15px;
}
/*Fine Container*/

/*Inizio footer*/
#footer-big{
background: url(../images/footer.png) no-repeat top center;
}
#foot-cont-link{
width: 900px;
margin: auto;
}
#footer-link{
background: #333;
height: 30px;
margin: auto;
color: #fff;
float: left;
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
padding-top: 10px;
}
#footer-link a, #footer a{
color: #fff;
text-decoration: none;
}
#footer-link a:hover{
color: #f30;
text-decoration: none;
}
#footer{
background: #333;
color: #fff;
height: 50px;
font-family: 'Ubuntu', serif;
font-size: 10px;
font-weight: bold;
text-align: center;
padding-top: 50px
}
/*fine footer*/

Grazie mille a tutti

[ResianTaxidrive]

manca una regola float:left per il #container; i suoi figli sono float mentre lui no quindi è come se non li "vedesse" e non riesce a regolarsi in altezza.
La prossima volta posta il codice con gli opportuni tag che trovi nell'editor (CODE) perchè così la lettura è decisamente sconfortante. INoltre metti solo le cose che servono , non stili relativi a loghi, inner-nav, tutorial e altre cose che non ci interessano. Inoltre è spesso opportuno uno scheletro dell'html per capire come sono messi gli oggetti.

[Aleinux]

Hai ragione, farò come hai detto. Un'altra cosa, ho visto che in alcuni casi il problema è stato risolto mettendo nel footer il codice

clear: right;

oppure

clear: left;

per impedire che il container vi si sovrapponesse. Me lo consigli come metodo?

Edit: Ho messo

float: left;

ed adesso mi si è spostato tutto a sinistra, anche il fotter, che prima veniva sovrapposto, adesso, non lo è più, ma si è allineato al container-left ed al container-center.

[ResianTaxidrive]

puoi mettere anche un clear:both ma all'interno del container come ultima cosa (anzichè assegnare float:left al container).

Ci sono varie soluzioni ma manca completamente il codice html per cui non ti si può consigliare nella maniera più opportuna. Posta l'html ridotto al minimo o meglio ancora un link alla tua pagina.

[Aleinux]

www.aleinux.it

[ResianTaxidrive]

sì se non vuoi mettere il float:left, metti, subito prima del tag di chiusura del #container questo:

<div style="clear:both"></div>

Puoi togliere anche il min-height.