altezza div

**ste77** · 16-02-2007, 11:43

Ciao,
sto realizzando un sito internet con una struttura a 3 colonne partendo da un foglio di stile downloadato proprio da html.it (di seguito riporto il codice).
Attualmente ogni colonna ha una sua altezza determinata dal proprio contenuto...invece vorrei che tutte e tre abbiano la stessa altezza (dinamica), quella della colonna con più contenuto in modo che visivamente tutte e 3 siano allineate con il foooter.
Qualcuno sa dirmi dove è il problema?

/*----------------------------------------*/
/*stili per il layout fisso con background*/
/*----------------------------------------*/

html,body{margin: 0;padding:0}

body
{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center
}

div#container
{
width:950px;
margin:0 auto;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
background-color:#CCC repeat-y top right;
}

div#container2
{
background-color:#DDDFFF;
text-align: left
}

/*----------------------------------*/
/*stili generici, su header e footer*/
/*----------------------------------*/

div#header
{
height: 250px;
background-color:#36C;
color: #ff0
}

div#footer a
{
color:#fff;
font-weight: bold;
text-decoration: underline
}

/*-----------------------------*/
/*stili specifici per il layout*/
/*-----------------------------*/

div#sx
{
float: left;
width: 150px;\width:160px;w\idth:150px;
background-color:#999;
padding: 1em 0 0 10px
}

div#dx
{
float: right;
width: 200px;\width:210px;w\idth:200px;
background-color:#333;
padding: 1em 5px
}

div#content
{
margin: 0 170px;
padding: 1em 10px
}

div#footer
{
clear:both;
text-align:center;
padding: 5px 0;
background-color: #69c;
color: #000
}

**ste77** · 20-02-2007, 12:38

Già ho provato alcuni giorni fa ma senza avere risposta....ci riprovo!
Sto realizzando un sito con un layout a 3 colonne (div sx, div cx, div sx).
Per ogni colonna ho impostato un colore di background diverso.
Purtroppo questo colore di sfondo termina in corrispondenza della fine del contenuto della singola colonna, ottenendo così un effetto grafico poco carino.
Vorrei che tutte le 3 colonne abbiano la stessa altezza ma senza che questa sia fissa (tramite height: tot px) poichè il contenuto varia da pg a pg
:master:
Qualcuno può aiutarmi per favore!!!!!!!!!!

**Leilond** · 20-02-2007, 15:14

Ci devi dare qualche informazione in più
Come le posizioni le colonne? Con absolute? Con float?
Le dimensioni in larghezza? In percentuale? in em? in px?

Postaci il markup e il css di base (solo ciò che ci serve per capire che tipo di layout stai facendo), poichè a markup diversi corrispondono a volte soluzioni molto diverse

**ste77** · 20-02-2007, 16:47

Questo è una bozza dell'html

************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout a tre colonne con float e background</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("css/style.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
<style type="text/css">
@import url("css/style_blu.css");
a#viewcss{color: #00f;font-weight: bold}
</style>

<link rel="stylesheet" media="screen" type="text/css" href="css/basic_dd.css" />


</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
<div id="time">
7 Dicembre 2007
14:30 p.m.
</div>
</div>

<div id="menu">
<ul>
[*]HOME




[*]IL TERRITORIO




[*]COSA FARE




[*]DOVE DORMIRE




[*]DOVE MANGIARE




[*]CONTATTI




[/list]
<div class="language">
English Version
</div>
</div>

<div id="sx">
<div class="visitatori">
[img]res/visitatori.jpg[/img]
Sei il visitatore n°

1350

...............................................
</div>
<div class="rss">

Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.

............................................... </p>
</div>
<div class="cerca">

<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com">

</A>
<INPUT type=submit name=btnG VALUE="Cerca">

<INPUT TYPE=text name=q size=19 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=it>
</td></tr></TABLE>
</FORM>

</div>

</div>

<div id="dx">
<div class="primo_piano">
<h2>721° Perdonanza Celestiniana</h2>
[img]res/perdonanza.jpg[/img]

La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
<div class="registrati">
<h2>Largezza totale</h2>

Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
<div class="consigli">
[img]res/tugurio.jpg[/img]
</div>

<div class="newsbox">
<h2>Largezza totale</h2>

Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
</div>

<div id="content">
<h2></h2>
<div id="laquila">
[img]res/l_aquila.jpg[/img]

[img]res/rosone.jpg[/img]
<span class="firstletter_b">L</span>a provincia di L’Aquila, la più vasta d’Abruzzo, la più montuosa
e la più chiusa dai suoi monti è anche la provincia più raccolta
nel fascino dei suoi paesaggi, nella quiete delle sue città e dei
suoi caratteristici villaggi abbarbicati sopra i più impervi rilievi
montani o distesi lungo gli altipiani e le valli in una sequenza
ininterrotta di immagini che mutano costantemente col variare
degli ambienti naturali.

<span class="firstletter_b">L</span>a tradizione la vuole fondata nella seconda metà del secolo
XIII da <span class="evidenza_r">Federico II di Svevia</span> e dal figlio di lui <span class="evidenza_r">Corrado IV</span> come confederazione di un gruppo di borghi o castelli della conca
aquilana, per la leggenda 99. E 99 si dice siano state le sue chiese, le sue piazze, i suoi rioni e le sue fontane.</p>
... continua >>
</div>
<div id="visitare">
<div class="titolo">
[img]res/decoration_sx.gif[/img]
DA VISITARE
[img]res/decoration_dx.gif[/img]
</div>
<div class="image">
[img]res/castello.jpg[/img]
</div>
<div class="postit">
CASTELLO SPAGNOLO
<h2>vista frontale</h2>
</div>

<span class="firstletter_r">L</span>a costruzione della Fortezza Spagnola fu dovuta ad una duplice esigenza, da un lato
quella di provvedere da parte degli spagnoli alla difesa di un importante luogo di accesso
al regno meridionale, quale era L’Aquila, nel quadro di un ampio piano di fortificazione
del territorio appena conquistato da Carlo V; da un altro, quella di punire e tenere a
freno la città che si era sollevata alla fine del 1528 contro il governo spagnolo, a causa
delle violenze dei suoi soldati appena giunti.
</P>
... continua >>
</div>
</div>

<div id="footer">
HOME :-:
IL TERRITORIO :-:
COSA FARE :-:
DOVE DORMIRE :-:
DOVE MANGIARE :-:
CONTATTI

© 2007 - R.T.S. Turismo di Tineri Ramona s.n.c. - Via S. Tommaso 11, 67049 Palombaia di Tornimparte (AQ)
</div>
</div>

</div>
</body>
</html>

************************************************** ****************

e questo il foglio di stile principale

##################################################

/*----------------------------------------*/
/*stili per il layout fisso con background*/
/*----------------------------------------*/

html,body
{
margin: 0;
padding:0;
height: 100%; /*per forzare la scrollbar anche su pagine corte in NN, FF e Opera */
}

body
{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center;
background-color: #3366CC;
}

span.firstletter_b
{
color: Blue;
font-size: 1.3em;
font-weight: bolder;
padding-left: 10px;
}

span.firstletter_r
{
color: #CC3300;
font-size: 1.3em;
font-weight: bolder;
padding-left: 10px;
}

span.evidenza_r
{
color: #CC3300;
font-size: 1em;
font-weight: bolder;
font-style: italic;
}

div#container
{
width:950px;
margin:0 auto;
background-color: red;
}

div#container2
{
background-color: white;
text-align: justify;
}

/*----------------------------------*/
/*stili generici, su header e footer*/
/*----------------------------------*/

div#header
{
height: 251px;
background-color: Fuchsia;
margin: 0;
padding:0;
}

h1,h2
{
margin: 0;
padding:0
}

h1
{
padding-left:10px;
font: bold 2.3em/80px arial,sans-serif
}

#########################################

Spero possa bastare a svelare il problema.

Grazie

Discussione: altezza div

Strumenti discussione

Ricerca discussione

Visualizza

Altezza layout a 3 colonne

altezza div

Permessi di invio