Div con "valign bottom"

**Agape** · 24-02-2010, 13:23

Ciao a tutti.

Non riesco a realizzare un layout con div e css. Allego un immagine con spiegato ciò che vorrei realizzare. E' importante che DIV A rimanga in alto e invece DIV B deve sempre essere allineato verticalmente in basso al div padre. Inoltre il dv padre deve allungarsi in base a quanto è lungo div c. Spero di essere stato chiaro.

Questo è quello che ho fatto fino ad ora:

codice:

<style type="text/css">
<!--
.container {
	width: 600px;
}
.left {
	float: left;
	width: 200px;
	margin:20px 60px 20px 70px;
}
.ppiano {
	width:200px;
	height:180px;
}
.valutaz {
	width:200px;
	height:180px;
	margin-top:20px;
}
.right {
	float: left;
	width: 200px;
	margin:20px 70px 20px 0;
	height:100%;
	min-height:380px;
}
.clear {
	clear:both;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="left">
    <div class="ppiano"></div>
    <div class="valutaz"></div>
  </div>
  <div class="right"></div>
  <div class="clear"></div>
</div>
</body>

**Agape** · 24-02-2010, 13:26

Scusate l'immagine era sbagliata :master:

**pidgey** · 24-02-2010, 16:22

Questa potrebbe essere una soluzione!
Ciao!
p.s. I bordi li ho lasciati per comodità, se il risultato che intendevi è questo li puoi togliere.

<style type="text/css">

</style>

</head>

<body>
<div class="container">
<div class="left">
<div class="ppiano"></div>
<div class="valutaz"></div>
</div>
<div class="right"></div>
</div>

</body>
</html>

**Agape** · 26-02-2010, 21:23

mmm... :master: non proprio. se div c, che nel nostro caso sarebbe la classe right, si allungasse, div b dovrebbe aumentare la distanza da div a, rimanendo sempre al pari con div c. Ho provato con il codice che mi hai dato tu ma succede quello che vedi nell'immagine. intanto grazie

**evan75** · 27-02-2010, 07:30

prova così:

Codice PHP:


<!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">

<!--

#contenitore {

    background-color: #9C0;

    width: 410px;

    height: 100%;

    position: relative;

}

#top {

    height: 200px;

    width: 200px;

    position: absolute;

    left: 0px;

    top: 0px;

    background-color: #036;

}

#bottom {

    background-color: #F60;

    height: 200px;

    width: 200px;

    position: absolute;

    left: 0px;

    bottom: 0px;

}

#cont_des_espand {

    height: 100%;

    width: 200px;

    padding-left: 10px;

    margin-left: 200px;

    min-height:500px;

}

-->

</style>

</head>

<body>

<div id="contenitore">

  <div id="cont_des_espand"></div>

  <div id="top"></div>

  <div id="bottom"></div>

</div>

</body>

</html>

(non ho ottimizzato il codice per facilitare la lettura)

ci sono anche altri modi per raggiungere questo risultato, ma questo mi è sembrato un esempio semplice da applicare.



fammi sapere come va'..

ciao
-E75

**Agape** · 28-02-2010, 19:58

Perfetto grazie! proprio quello che cercavo

**evan75** · 28-02-2010, 20:12

figurati.

ciao

Discussione: Div con "valign bottom"

Strumenti discussione

Ricerca discussione

Visualizza

Div con "valign bottom"

Permessi di invio