Problema con il div container

**IkkiPhoenix** · 28-10-2012, 20:15

Ciao a tutti!

Come da titolo ho un problema con il div container.

La mia idea sarebbe di inserire tre colonne all'interno di un container di dimensioni orizzontali fisse ma che verticalmente si adattino tutte e tre alla colonna più lunga. E che tra lo spazio libero lasciato appositamente tra le colonne il background-color che si veda sia quello del container.

Non capisco perchè però il div container non sembra proprio contenere le tre colonne.. Anche perchè ho cercato di scrivere solo il codice minimo per avere un esempio.. I tre div leftside, center e rightside sono tutti dichiarati all'interno del div container, quindi inizio a pensare che forse mi manca qualche nozione di base..

Questo è il codice, se qualcuno potesse gentilmente aiutarmi gli sarei grato! Grazie!

P.S.
Ho inserito il padding nel container perchè altrimenti proprio non riuscivo a trovarlo ed a vederlo...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body
{
	background-color: #4E5869;
}

#container
{
	background-color: red;
	width:1000px;
	height:100%;
	margin: 0px auto;
	padding:20px;
	border: 5px solid black;
}

#leftside
{
	background-color:lightgrey;
	width:110px;
	min-height:100%;
	margin:0px;
	margin-right:15px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#center
{
	background-color:green;
	width:750px;
	min-height:100%;
	margin:0px;
	margin-right:15px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#rightside
{
	background-color:lightgrey;
	width:110px;
	min-height:100%;
	margin:0px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#footnote
{
	background-color:darkgrey;
	width:1000px;
	height:30px;
	clear:both;
	margin: 0px auto;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

</style>


</head>

<body>


<div id="container">

	<div id="leftside">
    	

 Qui ci sarà il menù laterale. </p>
    </div>
    
    <div id="center">
    	

 Qui ci sarà il main. </p>
    </div>
    
    <div id="rightside">
    	

 Qui ci saranno i banner. </p>
    </div>

</div>

<div id="footnote">
	

 Qui ci saranno i diritti</p>
</div>

</body>
</html>

**IkkiPhoenix** · 28-10-2012, 21:37

Dettagli aggiuntivi:

Se imposto il div container con una lunghezza fissa allora poi tutto più o meno si sistema, io però non vorrei dare una lunghezza fissa ma vorrei che si adatti al testo più lungo tra le tre colonne!

Poi continuo a credere che le altezze così come le ho settate dovrebbero essere giuste in quanto mettendo quella del container al 100% vorrei che si adattasse al testo più lungo delle tre colonne, e quella delle tre colonne è impostata con min-height=100% in modo che le due più corte dovrebbero adattarsi.. Non riesco a capire cosa ci sia di sbagliato..

Infine un'altra domanda, come si fa ad impostare i margini delle tre colonne interne in modo che restino all'interno del container?

Mi spiego meglio, vorrei che oltre allo spazio tra le tre colonne ve ne sia anche tra le colonne laterali e i bordi laterali del container e pure tra tutte le colonne ed i bordi superiore ed inferiore del container. Ma non appena li setto visto che sono già alti il 100% del container mi escono dal container in basso (io uso googlechrome).

Grazie ancora a tutti!

**IkkiPhoenix** · 29-10-2012, 20:16

Ho notato che se inserisco il float:left; nel container allora effettivamente contiene i tre div, però appunto lo sposta tutto a sinistra, e non lo centra più nella pagina...

Ma soprattutto non capisco la logica per cui se lo setto come float:left; allora li contiene, altrimenti no..

Qualcuno ha qualche suggerimento da darmi??

**IkkiPhoenix** · 30-10-2012, 00:51

Scusate se scrivo ancora, spero di non essere accusato di spam, ma sto ottenendo nuovi risultati apportando delle modifiche e vorrei renderle note a tutti.

Se setto la lunghezza di html e body al 100%, allora il container sarà lungo tutta la pagine e le tre colonne al suo interno. Ma non va bene perchè se il testo è molto e supera la lunghezza della pagina allora iniziano dei casini.

Finora la soluzione migliore e più pulita è la seguente:

codice:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<style type='text/css'>

body
{
	background-color: #d7e3e5;
}

#great
{
	margin:0 auto;
	width:1000px;
}


#container
{
	background-color:#7ba3ab;
	width:1000px;
	height:100%;
	float:left;
	margin: 0 auto;
	border-radius: 10px;
    	-moz-border-radius: 10px; /* firefox */
        -webkit-border-radius: 10px; /* safari, chrome */
}

#leftside
{
	background-color:lightgrey;
	width:100px;
	min-height:100%;
	margin:15px;
	float:left;
	border-radius: 10px;
    	-moz-border-radius: 10px; /* firefox */
        -webkit-border-radius: 10px; /* safari, chrome */
}

#center
{
	background-color:lightgrey;
	width:740px;
	min-height:100%;
	margin:15px 0px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#rightside
{
	background-color:lightgrey;
	width:100px;
	min-height:100%;
	margin:15px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#footnote
{
	background-color:#7ba3ab;
	text-align:center;
	width:1000px;
	height:30px;
	margin: 10px auto;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

</style>

<title>Untitled Document</title>

</head>

<body>

<div id='great'>
<div id='container'>

	<div id='leftside'>
    	

 Qui ci sarà il menù laterale. blablabla bla blabla blablabla bla blabla </p>
    </div>
    
    <div id='center'>
    	

 Qui ci sarà il main. </p>
    </div>
    
    <div id='rightside'>
    	

 Qui ci saranno i banner.  blablabla bla blabla blablabla bla blabla blablabla bla blabla blablabla bla blabla</p>
    </div>

</div>
</div>
<div style="clear:both"> </div>
<div id='footnote'>
	

 Qui ci saranno i diritti</p>
</div>

</body>
</html>

Ovvero settare il div container come float:left, però per centrarlo va a sua volta inserito in un altro div che si centrerà ma che, come succedeva prima di questa modifica allo stesso container, non "conterrà" propriamente i div al suo interno.

Inoltre per poter inserire del margine tra i div centrali ed il footer, non capisco perchè ma devo inserire tra loro un div con clear:all... Mentre se inserisco questa opzione nel div stesso del footer il margin-up continua a non funzionare...

L'unico problema è che in ogni caso finora non sono riuscito a fare in modo che le tre colonne abbiano la stessa lunghezza fissata alla maggiore delle tre...

Continuerò a fare delle modifiche e continuerò ad aggiornarvi sperando che tutto questo possa servire almeno a qualcun altro..

Discussione: Problema con il div container

Strumenti discussione

Ricerca discussione

Visualizza

Problema con il div container

Permessi di invio