div allineato verticale in basso

**i_am_antipop** · 15-06-2006, 12:03

Ciao, ho un div che ne contiene un'altro...

vorrei che il div interno fosse allineato in basso.

E' possibile? Come si fa?

grazie

**Mich_** · 15-06-2006, 12:13

Se usi un layout fisso, ti basta definire bottom (anziche` top) nel box interno.

Se invece usi un layout fluido, potrebe bastare definire il margine superiore auto e quello inferiore a 0 (ma la effettiva applicabilita` di questo dipende dal contesto e dal browser).

**i_am_antipop** · 15-06-2006, 12:20

#contenitore{
width:222px;
margin-left:2px;
min-height:222px;
height: auto !important;
height:410px;
padding:0px;
text-align: center;
float:left;

}

#interno{
vertical-align: bottom;

margin-top: auto;
margin-bottom: 0;
text-align: bottom;
float:left;

}

ho provato ma credo di aver fatto un po' di confuzia...

**Mich_** · 15-06-2006, 14:50

Decisamente hai fatto confusione.

Quando si usano proprieta` di qualsiasi tipo, e` bene verificare se queste esistono.
Ad esempio il taxt-align non ha il valore bottom.

Il text-align non ha senso metterlo all'interno del blocco che vuoi spostare: tale proprieta` serve per spostare il testo all'interno del suo contenitore, ma dato che il testo non puo` stare dentro il <div> direttamente, in quell apaosizione non serve.
Eventualmente puoi inserirlo nel #contenitore per far contento IE.

Il contenitore non ha un valore di altezza. Pertanto sara` alto quanto richiedono i dati in esso contenuti. In tale condizione non ha senso allineare in basso.

Altra domanda: nel contenitore ci sono altri blocchi? Se si` potrebbero interferire.
PS: posta anche l'HTML che usi.

**i_am_antipop** · 20-06-2006, 09:59

Ciao, scusa il ritardo.

ecco il codice.

tnx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html>
<head><title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url(css/style.css);

</style>

CSS
body,html { height:100%;margin:0; padding:0 }

body {
text-align:center;
background-image : url(../img/bg.jpg);
background-repeat: repeat-x;
background-color: #fff;
}

#top {

height:3px;
width:100%;
margin-top:4px;
background:#fff;
}

#header {
width:100%;
height:18px;
margin-left:2px;
margin-right:1px;
padding-right:3px;
padding-left:1px;
float:left;
}

#frame {
width:990px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding-top:2px;
padding-left:2px;
padding-right:2px;
text-align:left;

background:#fff;
background-image : url(../img_com/bg_frame.gif);
background-repeat: repeat-y;
}

#contentleft {
width:222px;
margin-left:2px;
min-height:222px;
height: auto !important;
height:309px;
padding:0px;
text-align: center;
float:left;
border:1px solid #fff;
background:#efefef;
background-image : url(../img_com/bg_sx.jpg);
background-repeat: repeat-x;

}
div#contentleft img {
margin-top:10px;
margin-left:6px;
margin-right:6px;
}

#language {
font-family: arial, sans-serif;
background-color:#0f0;
font-weight:bold;
text-align:left;
font-size:11px;
margin-top: 31px;
margin-bottom: 0px;
padding-bottom : 6px;
text-align: left;
float:left;

}
#contentright3 {
width:757px;
padding:0px;
min-height:109px;
height: auto !important;
height:109px;

background:#efefef;
float:left;
}

#center {
text-align: justify;
width:444px;
min-height:341x;
height: auto !important;
height:341px;
margin:0;
padding-top:0px;
float:left;
font-family: arial, sans-serif;
color:#000;
background:#efefef;
font-size:11px;
background-image : url(../img_com/bg_logo.jpg);
background-repeat: no-repeat;
}

#flash {
width:313px;

min-height:271px;
height: auto !important;
height:271px;

padding:0px;
float:left;
background:#efefef;
}

#flash2{
width:26px;

min-height:340px;
height: auto !important;
height:340px;

padding:0px;
float:right;
background:#efefef;
}

.tasselloSx {
height:18px;
width:222px;
padding-left:0px;
padding-right:0px;
float:left;
background:#999;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.tasselloCx {
height:18px;
width:445px;
padding-left:0px;
padding-right:0px;
float:left;
background:#999;
border:1px solid #fff;
}
.tasselloDx {
height:18px;
width:313px;
padding-left:0px;
padding-right:0px;
float:left;
background:#999;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.tasselloSxLight {
height:18px;
width:222px;
padding-left:0px;
padding-right:0px;
float:left;
background:#ccc;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.tasselloCxLight {
height:18px;
width:445px;
padding-left:0px;
padding-right:0px;
float:left;
background:#ccc;
border:1px solid #fff;
}
.tasselloDxLight {
height:18px;
width:313px;
padding-left:0px;
padding-right:0px;
float:left;
background:#ccc;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}

#footer {

width:100%;
height:74px;
margin-left:2px;
margin-right:1px;
padding-right:3px;
padding-left:1px;
float:left;
}

#footerSx {
width:811px;
text-align:center;
height:45px;
margin-top:2px;
margin-bottom:2px;
padding-top:3px;
float:left;
background:#fff;
border:1px solid #F0F1F1;
}
div#footerSx img {
margin-left:6px;
margin-right:6px;
}

#footerDx {
width:164px;
text-align:center;
height:45px;
margin-top:2px;
margin-left:4px;
margin-bottom:2px;
padding-top:4px;
float:left;
background:#fff;
border:1px solid #F0F1F1;
}
div#footerDx img {
margin-left:6px;
margin-right:6px;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

.testo{
font-family: arial, sans-serif;
color:#000;
text-align:left;
font-size:11px;
}

.testoBold{
font-weight:bold;
}

#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}

#testoBox {
text-align: justify;
width:380px;
min-height:100px;
height: auto !important;
height:100px;
margin:0px;
padding-top:5px;
padding-left:40px;
padding-right:5px;
float:left;
font-family: arial, sans-serif;
color:#000;
font-size:11px;
}

div#testoBox p{
margin:0;
}

#titolo{

text-align:left;
padding-left:3px;
padding-right: 25px;
padding-top:15px;
padding-bottom:0px;
float:left;
}

ul.lista {
list-style-image: url(../img_com/punto_elenco3.gif)
}

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html>
<head><title>TEST</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
		@import url(css/style.css);
	
</style>



</head>
<body>
<div id="top">[img]img_com/bg_top_4.gif[/img]</div>
<div id="frame">
	<div id="header" class="header">
		<div class="tasselloSx"></div>
		<div class="tasselloCx"> </div>
		<div class="tasselloDx"></div>
	</div>
	<div id="contentleft">
		<div class="menu2"> 
			<div class="tasselloSx"> </div>
			

ciaociao</p>
		</div>
		<div id="language">IO DEVO STARE IN BASSO</div>
	</div>
	<div id="contentright3"> 
		<div id="center">
			<div id="testoBox">



</p>



 testotestotesto testo</p></div>
			<div id="flash2"></div>
		</div>
		<div id="flash">[img]img_com/foto.jpg[/img]
</div>
	</div>
	<br clear="all" /> 
	<div id="footer">
		<div class="tasselloSxLight"> </div>
		<div class="tasselloCxLight"> </div>
		<div class="tasselloDxLight"> </div>
		<div id="footerSx"></div>
	</div>
	[img]img_com/bg_bottom.jpg[/img]
</div> 
</body>
</html>

**Mich_** · 20-06-2006, 10:36

Mica facile seguire quel codice. Non e` che potresti correggere inserendo il codice tra i tag [ code ] e [ /code ] (senza spazi), e usando opportunamente le indentazioni del codice per poter capire?

Inoltre ci sono una serie di nomi gia` usati dal DOM, che potrebbero far confusione nel broser:
top, frame, language, center, flash

**i_am_antipop** · 20-06-2006, 10:52

ho aggiornato il codice nel post sopra.

(per i nomi: per ora lascio quelli.. ma poi li cambio, grazie x la segnalazione)

tnx!

**Mich_** · 20-06-2006, 12:28

Ora si puo` iniziare a metterci mano. Sarebbe piu` semplice se ci fosse un link di prova.

Anzitutto vedo che usi una DTD con path errato: non so se il browser e` in grado di raggiungerla lo stesso (e` in fondo quella standard).

Se vuoi un allineamento in basso, non puoi fissare anche il margine superiore.
Il margine superiore devi lasciarlo mettere al browser, quindi o non lo definisci o lo definisci auto.
Eventualmetne puoi specificare l'altezza (qualche browser non permette di posizionare vert. un oggetto se non e` specificata l'altezza sua e l'altezza del contenitore).

**i_am_antipop** · 20-06-2006, 15:33

Ciao, ho provato a semplificare il codice per capire il meccanismo... ho messo a #lingua:

top: auto;
bottom: 0;

ma niente...

Doctype: ho provato a darlo in pasto al validator e lo gradisce...

CSS

body,html { height:100%;margin:0; padding:0 }

body {
text-align:center;
background-image : url(../img/bg.jpg);
background-repeat: repeat-x;
background-color: #fff;
}

#header {
width:100%;
height:18px;
margin-left:2px;
margin-right:1px;
padding-right:3px;
padding-left:1px;
float:left;
}

#main {
width:990px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding-top:2px;
padding-left:2px;
padding-right:2px;
text-align:left;

background:#fff;
background-image : url(../img_com/bg_frame.gif);
background-repeat: repeat-y;
}

#contentleft {
width:222px;
margin-left:2px;
min-height:200px;
height: auto !important;
height:300px;

padding:0px;
text-align: center;
float:left;
border:1px solid #fcf;
background:#efefef;
background-image : url(../img_com/bg_sx.jpg);
background-repeat: repeat-x;

}

#lingua {
font-family: arial, sans-serif;
background-color:#0f0;
font-weight:bold;
text-align:left;
font-size:11px;
text-align: left;
float:left;
top: auto;
bottom: 0;

}

codice:

<body>
<div id="main">
	
	<div id="contentleft">
		<div class="menu2"> 
			io sto sopra


		</div>
		<div id="lingua">IO DEVO STARE IN BASSO</div>
	</div>
	
</div> 
</body>

hai mica tempo/voglia di farmi capire come allineare in basso un DIV interno? (es #lingua dentro #contentLeft)

Discussione: div allineato verticale in basso

Strumenti discussione

Ricerca discussione

Visualizza

div allineato verticale in basso

Permessi di invio