corretto posizionamento div

[spacecorpse]

Buondì. Sto costruendo un sito ma è evidente che ho fatto un casino col posizionamento dei div in alcune pagine:
- index: dentro al div dei contenuti ce ne sono altri 2 per gestire il footer.

<div id="BOX" class="BOX" name="BOX">
 <div class="content">
 contenuti che variano, gestito con php
 </div>

 <div class="footer">
 <?php include("footer.html"); ?> 
 </div>
</div>

- le 2 pagine che hanno all'interno altri div:

Questa proprio è un casino, tecnicamente dovrebbe essere del contenuto con sotto 3 box affiancati.

<div class="content">
contenuto sopra
</div>


<div class="container">
<div class="box1">
contenuti random
</div>
<div class="box2">
contenuti random
</div>
<div class="box3">
contenuti random
</div>
</div>

Questa invece funziona di per sè, ma il footer si spara in alto a tutto.

<div id="cont" style="position:absolute; top:0; left:0; width: 100%; height:450px;padding-bottom: 20px;">

 <div id="left" style="position:absolute; top:50px; right:0px; padding-right:15px;">
  frame di googlemap
 </div>
 
 <div id="right" style="position:absolute; top:50px; left:0px; border-left: 1px solid #b9143b; padding-left:5px; height:110px;">
  altro altro altro altro altro
 </div>

 <div id="formail" style="position:absolute; top:170px; left:0px; padding-left:15px; height:200px;">
 altro altro altro altro altro
 </div>
</div>

Ed il css:

/* CSS Document */
/* link style */

/*-----stile link tutte le pagine-----*/


A:visited{
color:#9f8e6a;
text-decoration:none;
font-family: Verdana;
font-size:11px;
letter-spacing: 2px;
border: 0px;
}
A:link{
color:#9f8e6a;
text-decoration:none;
font-family: Verdana;
font-size:11px;
border: 0px;
}
A:active{
color:#9f8e6a;
text-decoration:none; 
font-family: Verdana;
font-size:11px;

}
A:hover{
color:#bb0035;
text-decoration:none;
font-family: Verdana;
font-size:11px;
border: 0px;
}
a.mini {font-size: 10px !important; letter-spacing: 1px;}

/*-----stile corpo di tutte le pagine-----*/

body, td{
font-family: Verdana;
font-size: 11px;
color: #5E4E42;
font-weight: none;
letter-spacing: 1px;
text-align: justify;
}

/*-----stile sezioni index-----*/

div.BOX{
position: absolute; 
left: 210px;     
top: 170px; 
margin: 5px;
width: 600px; 
min-height:400px;
overflow:none;
padding-bottom: 20px;
}


div.footer{
position: float;
bottom:1px;
padding-top: 20px;
padding-bottom:10px;
z-index:10;
}


/*-----stile 3box della home-----*/

div.content{
width: 600px;
min-height:300px;
z-index:50;
}

div.container{
width: 600px;
min-height:300px;
z-index:30;
}

div.box1{
position:absolute;
left:0px;
width: 190px;
height: 200px;
background-color:#EAE4DB;
padding:5px;
}
div.box2{
position:absolute;
left:200px;
width: 190px;
height: 200px;
border-left: 3px solid #FFFFFF;
background-color:#EAE4DB;
padding:5px;
}

div.box3{
position:absolute;
left:400px;
width: 190px;
height: 200px;
border-left: 3px solid #FFFFFF;
background-color:#EAE4DB;
padding:5px;
}

(ovviamente ho postato solo i punti salienti)
In pratica, nelle due pagine postate, il footer va a piazzarsi dove gli pare (è interessante vedere come ogni browser lo spari in un casino sempre diverso ). Ho tentato si smanettare con gli z-index (e ci sono dei padding a caso nel content e nel footer) ma senza fortuna...

Ho già letto la guida di HTML e cercato tutta la mattina su google, anche in inglese.

Ma è evidente che il problema sta a monte e io non riesco a trovarlo, e si sa 4 occhi sono meglio di 2.
Spero ci sia qualcuno ricco di pietà e con un pò di tempo da perdere...

[ndrini]

Ma, io ne so poco, ma sto cercando una soluzione a due div (uno sotto l'altro) che invece mi si
affiancano.
Mi sa che è un po' la stessa cosa.

Ho messo height:800px

e



bellamente ignorati


Andrea

[fcaldera]

Originariamente inviato da ndrini
Ma, io ne so poco, ma sto cercando una soluzione a due div (uno sotto l'altro) che invece mi si
affiancano.
Mi sa che è un po' la stessa cosa.

Ho messo height:800px

e



bellamente ignorati


Andrea

credo che negli ultimi 6 mesi l'utente sia riuscito a risolvere

[ndrini]

speriamo proprio di sì

[ndrini]

in effetti cercavo una risposta, ma volevo confortare il richiedente.

Il mio problema è che ho tre parti della pagina div che NON si affiancano e si mettono una sotto l'altra - parlo delle <div id="sx"> e <div id="dx">

<body> 

<body>

prima parte 
<div id="left" style="width: 20%; float: left; height:100px">vvv</div>
<div id="center" style="float: left; width: 60%; height:100px">fff</div>
<div id="left" style="width: 20%; float: left; height:100px">vvv</div>


seconda parte di pagina

 
<div id="sx">..tabella </div>
<div id="dx"> Benvenuti </div>

terza  parte di pagina
<div id="left" style="width: 20%; float: left;">vvv</div>
<div id="center" style="float: left; width: 60%;">fff</div>
<div id="left" style="width: 20%; float: left;">vvv</div>

</BODY>

con questo CSS

div#sx { width: 10%;  /* supponendo che non ci siano margini, padding, bordi */
height:800 px;
background:green;
div#dx { width: 90%;  /* supponendo che non ci siano margini, padding, bordi */
height:800 px; 
background:blue;
float: right;  }

(forse per un uso sbagliato dell'attributo float? Devo mettere un elemento contenitore?)

??
:-)

Andrea

[fcaldera]

apri una tua discussione se hai un problema (diverso da quello originale)