Div contenitore che non contiene altri div

[drHome]

Buongiorno a tutti,
ho un problema, forse stupido, ke non riesco a risolvere: ho un div contenitore (apDiv1) che dovrebbe contenere altri div interni (logo, menu, box, etc.).
Nel momento in cui scrivo il codice, però, questi div interni non risultano contenuti all'interno del div contenitore.


il CSS è:

#apDiv1 {
padding:10px;
width:850px;
margin:0 auto;
z-index:1;
}
#logo {
position:fixed;
width:200px;
height:20px;
z-index:2;
}
#menu {
position:fixed;
top:75px;
width:200px;
height:100px;
z-index:3;
}
#box {
position:absolute;
top:75px;
width:575px;
z-index:4;
margin-left:275px;
}
... (altri div)
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #666666;
}
body,td,th {
font-family: Arial;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #000000;
}



mentre l'html, molto in sintesi, è:

<div id="apDiv1">
<div id="logo">bla bla bla</div>
<div id="menu">
<div align="justify">bla bla bla</div>
</div>
<div id="box">
<div align="left">bla bla bla</div>
</div>
... (altri div)
</div>

mi sembra che l'html non abbia problemi dato ke i div sono tutti chiusi.
forse il problema è nel CSS.

spero ke qualcuno possa aiutarmi.
grazie

[marco.carrieri]

Io credo che il problema sia relativo all'uso degli absolute e dei fixed, prova a cambiare usando float:left e/o clear:both.

[drHome]

Grazie per la risposta, ma non sono espertissimo di html, quindi ti devo chiedere qualche chiarimento.
innanzitutto, togliendo solo tutti i fixed e absolute, riesco a risolvere il problema del div contenitore che, finalmente, contiene gli altri 3 div, ma si pone il problema che questi perdono la posizione che dovrebbero avere.
... in realtà il problema si risolve togliendo absolute dal solo div "box".
se uso i float, i div "logo" e "menu" si allineano in orizzontale, e se uso float:right x "box" mi si ripropone il problema iniziale.
se invece, senza usare float, mantengo fixed per questi due div (logo - menu), e tolgo absolute a "box", si pone un nuovo problema: logo e menu sono al loro posto (quindi tutto OK), ma box si posiziona + in alto di quanto ho indicato con top.

in ogni caso, il css è:

#apDiv1 {
padding:10px;
width:850px;
margin:0 auto;
z-index:1;
}
#logo {
position:fixed;
width:200px;
height:20px;
z-index:2;
}
#menu {
position:fixed;
top:75px;
width:200px;
height:100px;
z-index:3;
}
#box {
top:75px;
width:575px;
z-index:4;
margin-left:275px;
}


in realtà, però, se potessi spiegarmi cosa significa clear:both sarebbe meglio. soprattutto: lo devo inserire nel css o nell'html?

[marco.carrieri]

Se riesci a postare uno schema di come vuoi i div, potrei aiutarti meglio.

[ispuk]

hai controllato che il width del div contenitore sia la somam esatta dei width dei div figli?

intanto evita l'uso degli absolute,

ti spiego meglio

mettiamo che il tuo div contenitore è width:800px

allora:
i div figli sommati devono avere la stessa larghezza(widht),e questo vale anche per la lunghezza(height)

quindi i div figli sommati non devono essere superiori a 800px

un esempio

<div id="contenitore" width="800">
<div id=" figlio1" width="350"><div>
<div id ="figlio2" width="450"></div>
</div>

(div contenitore= 800)=(div figli1= 350)+(div figlio2= 450)

[drHome]

Originariamente inviato da marco.carrieri
Se riesci a postare uno schema di come vuoi i div, potrei aiutarti meglio.

cerco di spiegarmi (... mi rendo conto di essere stato un po' ermetico):
la pagina è larga 850px e deve avere un'altezza variabile (in base alla lunghezza dei contenuti).
avendo un'altezza variabile, per leggere i contenuti bisogna scrollare (come in un qualsiasi blog), però voglio che il logo del sito e il menù siano fissi, in modo tale che anche scrollando la pagina, questi rimangono fermi.
in poche parole la pagina sarà divisa in 2 colonne verticali: la prima (larga 200px) fissa, la seconda, affiancata e larga 575px, deve essere scrollabile.
quindi ho impostato la posizione dei 2 div "logo" e "menu" su fixed, mentre il div "box" (la parte con i contenuti), essendo + lunga dello schermo, non può avere come posizione, fixed.

se imposto nel div "box" position:absolute, il div si trova nella posizione esatta (cioè ad una distanza dal bordo sup. di 75px) ma il div contenitore non contiene + "box", se tolgo position:absolute, quest'ultimo problema si risolva, ma "box" cambia posizione (cioè si sposta verso l'alto).

in ogni caso inserisco il codice html intero della pagina:

<title>nome</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages">
<div id="apDiv1">
<div id="logo">[img]logo.gif[/img]</div>
<div id="menu">
<div align="justify">
riga1

riga2

riga3

riga4

riga5</div>
</div>
<div id="box">
<div align="left">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>
<div id="copyright">
<div align="justify" class="styleC">© copyright</div>
</div>
</div>
</body>
</html>


mentre il css è:

html{height: 100%; margin-bottom: 1px}

#apDiv1 {
padding:10px;
width:850px;
margin:0 auto;
z-index:1;
}
#logo {
position:fixed;
width:200px;
height:20px;
z-index:2;
}
#menu {
position:fixed;
top:75px;
width:200px;
height:100px;
z-index:3;
}
#box {
position:absolute;
top:75px; (se tolgo "position:absolute", questo valore non funziona +)
width:575px;
z-index:4;
margin-left:275px;
}
#copyright {
position:fixed;
bottom:0px;
width:200px;
height:25px;
z-index:8;
}


spero ke ora sia + comprensibile: ci sono dei div che sono in colonna e devono rimanere fermi, poi c'è il div "box" che deve scrollare.
comunque grazie x l'interessamento