[Css] bordo che scompare

[Lollys]

Ciao ........problemino

Ho un layout fatto da un blocco esterno di 700px poi dentro cè l'intestazione e di sotto il contenuto.

Tutto bene ma nel contenuto impostato cosi:

#Contenuto{
height: 100%;
border-left: 1px solid #c6c6c6;
border-right: 1px solid #c6c6c6;
}

#Testata div{
float: left;
width: 50%;
}

<div id="Contenuto">

<div id="Testata">
<div>CIAO</div>
<div>CIAO</div>
</div>

</div>


I due bordi grigi del div CONTENUTO si vedono per tutta l'altezza.
Se però imposto, ai DIV della testata che hanno il float, un'altezza 100px, questi si estendono ma il bordo grigio del CONTENUTO no !

Come mai ?

[Lollys]

Appena risolto.

Pardon :maLOL:

Era il clear: left alla fine che scazzava.

non fate questa faccia
e daiii tutti sbagliamo

[Lollys]

Ma, spiegatemi una cosa:

Cè il contenitore

<div id="Contenitore">

<div id="colonna1"></div>
<div id="colonna2"></div>
<div id="colonna3"></div>

<div id="menu_sotto"></div>

</div>


LE tre colonne hanno float: left poi cè il menu in basso con clear: left;

Perchè in IE scazza ?
Premetto che la colonna centrale è + lunga delle altre due è forse per quello, perchp il clear: left si basa sulla colonna di destra ?

:master:

[Mich_]

Nel sito di constile.org, mi pare sia trattato anche questo esempio.

Comunque prova a mettere clear:both; nel <div> che chiude le tre colonne; altri risolvono con un <div> che racchiude solo le tre colonne (riaprendo quindi un altro <div> sotto ad esse).

[Lollys]

Sai come ho risolto ? ...un colpo di c... VVoVe:

Praticamente il clear:left si basa sulla colonna di destra, e visto che questa è + corta và a finire sotto quella centrale che è + lunga.

Visto che le tre colonne non hanno sfondo ma contenuti, ho datto a loro un'altezza 100% ed ho risolto, il div clear:left rimane schiacciato per cosi dire di sotto.

Nemmeno con clear:both funzionava.

[Lollys]

Aspetta.............un'altra domandina che può tornare utile,

Ogni volta che ho dei blocchi, con all'interno dei div in colonna con dei float passando al successivo blocco come faccio ?

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
</div>

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
</div>

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
</div>

a chi devo dare il clear:left o clear:both ?
se lo do al blocco successivo scazza con quello precedente, a meno che non metta un'altro div dopo le colonne con clear:left

cosi:

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
 <div style="clear:left">
</div>

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
 <div style="clear:left">
</div>

<div id="blocco">
 <div id="colonna_destra"></div>
 <div id="colonna_sinistra"></div>
 <div style="clear:left">
</div>

ma se io non voglio aggiungere quel div in + come faccio ?
a me si ribalta tutto senza quel div vuoto anche se assegno al BLOCCO il clear:left :master:

[Mich_]

Anzitutto un errore nel tuo codice, che potrebbe introdurre comportamenti strani e diversi da browser a browser:
Non puoi dare lo stesso id a due div della stessa pagina: puoi dare la stessa classe, ma gli id devono essere diversi.

Il clear:both; resetta sia il float:left; che il float:right;
Se non ci sono motivi validi, puoi usare sempre il clear:both;

In teoria dovresti poter inserire il clear:both; anche nel div di classe blocco (classe, non id).

Comunque se usi i div come fai (supposto che usi le classi, non gli id) non dovrebbe esserci la necessita` del clear:both; , ma in questo campo credo che i vari browser interpretino a modo loro.
Tieni anche presente che in ogni <div> ci deve essere qualcosa: un div vuoto potrebbe non solo non venir visualizzato, ma neppure venir inserito tra gli oggetti della pagina.
Quindi come minimo un &amp;nbsp; devi inserirlo.

[Lollys]

Già scusami per gli id ripetitivi ho scritto qui cosi per far capire meglio, nella mia pagine ho degli id dichiarati diversamente, comunque a me continua a non funzionare con Mozilla.

Faccio altre prove, poi vediamo

[Lollys]

Ho scoperto che cosè !!! ma perchè .......... VVoVe:

Vi spiego un pò come è strutturata la pagina.

Ho un div globale che incorpora il tutto.
poi dentro ci sono:
due div con float: left di larghezza 50%

poi sotto di questi altri 3 div con float:left di larghezza in px che sommati fanno quello globale, il primo div ha un clear:left

sotto a queste 3 colonne cè un div senza float ed ovviamente clear:left

funziona tutto tranne quello sotto, cioè in pratica funziona e si vede, gli applico un bordo nero e và bene, però se gli metto uno sfondo, sparisce il bordo nero e lo sfondo si estende in altezza sopra le tre colonne precedentemente chiuse VVoVe:

Non riesco a capire il perchè. :master:

Notifico che solo con IE succede :rollo: