div che non si estende oltre il flot:left

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve a tutti, sto creando un sito con una struttura abbastanza semplice, fatta di <div>. Dato che alcuni di questi <div> sono contenuti all'interno di altri ho usato l'attributo float in css. Il problema è che il <div> madre, cioè quello che dovrebbe contenere tutti gli altri <div>, si ferma quando incontra un flot:left. Faccio un esempio

HTML:
<div class="page" align="center">

    <div class="banner"></div>

    <div class="cover">
	<div class="menu"></div>                    
        <div class="divfoto"></div>
    </div>    

</div>

HTML:
.page{
	background-color:#00FFFF;
	height:100%;}	
	
.banner{
	width:985px; 
	height:100px;
	background-color:#00F;
	border-bottom:#FFFFFF solid 1px;}
	
.cover{	
	width:985px;
	margin:0px;}	
.menu{
	width:225px;
	height:200px;
	float:left;
	background-color:#0F0}
.divfoto{
	width:760px;
	height:200px;
	float:left;
	background-color:#FF0000}

il <div class="page"> ripete lo sfondo solo fino al <div class="banner">, mentre dovrebbe estendersi per tutta la pagina. Come posso fare?
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Assegna questa classe a <body> per renderlo alto quanto la pagina

Codice:
body { position: absolute; top: 0; bottom: 0;  }

ti ringrazio, ma forse non è quello che intendevo. Io devo estendere il div page per tutta la pagina, ma si "ferma" subito dopo il div banner.

cmq grazie per il link dell'articolo
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
HTML:
<div class="madre">
	<div class="1.."></div>
	<div class="2.."></div>
	<div class="3.."></div>
	...
	<div class="N°"></div>
	<div style="clear: both;"></div><!-- Può essere il footer -->
</div>
Inserisci dentro il div madre (COME ULTIMO DIV!!!):

- <div style="clear: both;"></div> <!-- Anche vuoto -->

Non floattarlo mettilo invisibile se non lo vuoi usare come footer.

Aggiunta:
Invece di impostare ALIGN="CENTER" nel codice dentro il div metti nel CSS del div:

- margin: 0 auto;
 
Ultima modifica:

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
Non me ne volere Jonn ma hai detto un'altra cosa non corretta.

Ho preparato un esempio con le due soluzioni corrette:
http://jsfiddle.net/qMkpN/


Background fix applica a body i css:
Codice:
position: absolute; top: 0; bottom: 0;
Facendo sì che il div .page che è settato ad altezza 100% sia alto quanto tutta la pagina e non quanto i contenuti. (che è la domanda dell'utente che ha aperto il topic).

Se invece si desidera che il div .page racchiuda anche i contenuti che hanno attributo float, ma non si vuole che vada sino in fondo alla pagina, allora si utilizza il fix overflow (che si può sempre testare nell'esempio), che applica
Codice:
overflow: hidden;
a .page, rendendo di fatto tutti gli elementi contenuti in .page racchiusi dentro a .page stesso.

un elemento clear è inutile in questo caso (in realtà in quasi tutti i casi è inutile, tranne casi davvero particolari).
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
No no, non te ne voglio ti spiego invece la mia di soluzione ma prima voglio commentare in modo personale la tua:
- La tua pur essendo valida però hai dovuto inserire codice JS (o sbaglio?)

La mia soluzione:

Tu hai un div per esempio container al quale dai solo attributi margin: 0 auto; per centrarlo ok?
Dentro a questo div ci metti dei div che però devi floattare (o flottare, come ti pare) per posizionarli come vuoi.
Ora immagina che tu vuoi dare un colore di sfondo (o un'immagine di sfondo) al div container.
A rigor di logica ti viene da pensare che dando uno sfondo al div container questo faccia da sfondo anche a tutti i div al suo interno.
Guarda un po, non è così!!! e qui ci scommetto la casa!!!

Questo perchè non lo fa? perchè il div container se non è dichiarato esplicitamente, non sa la sua stessa lunghezza verticale e quindi lo sfondo proprio non si vede.

La soluzione più semplice e velocissima è quella di aggiungere come ultimo div prima della chiusura del div container un altro div che abbia l'attributo BOTH (cioè che non accetta alcun elemento ne a destra ne a sinistra e che oltretutto io uso sempre come footer in tutti i progetti) al selettore CLEAR.

Quindi quello che voglio sottolineare è che si, magari la tua soluzione è valida (non sono stato a leggerla perbene, ora non ho voglia) ma questo non implica che la mia sia errata.
:)

Ognuno ha i suoi metodi di scrivere, è anche questo il bello della programmazione in generale.
 

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
No, il javascript l'ho messo solo per rendere dinamico l'applicamento dei fix. Se vedi infatti serve solo a far funzionare i due bottoni che aggiungono una classe all'elemento adatto.

La mia soluzione è puramente a livello di CSS senza modifica del markup HTML, ed è quindi la soluzione migliore.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Migliore o no, sono due soluzioni, l'importante è che a chi cerca la soluzione serva almeno una delle due altrimenti abbiamo perso tempo per niente XD.
 

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
La tua è una non soluzione.

E' come se tu avessi la macchina che va piano e per farla andare più veloce decidessi di mettergli un razzo nel bagagliaio, funziona, certo. Ma la cosa più logica e corretta sarebbe sistemare i componenti della macchina per farla funzionare meglio.

Il clear:both come ho già spiegato serve in sporadici casi, e questo non è uno di quelli.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Prova a riempire un qualunque div con un pò di <BR /> (simulazione di contenuti) e poi vieni a riscrivere che la mia è una "non soluzione"... :fonzie:
 
Discussioni simili
Autore Titolo Forum Risposte Data
W Link che apre un div non funzionante HTML e CSS 7
S semplice link che però non compare dentro ad un DIV HTML e CSS 3
G div main che non copre tutta la pagina HTML e CSS 2
G Div che non si vedono HTML e CSS 1
Y div che non segue il resto della pagina HTML e CSS 3
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
paloppa Div che appare appena due form sono compilati jQuery 16
L php - pulsante premuto che mostra #div PHP 3
U div fisso che ad un certo punto dello scroll scompare jQuery 3
U [Javascript] div linkabile che apre link e scompare Javascript 3
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
trattorino [PHP] blocchi div che si posizionano in alto automaticamente PHP 5
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
M Div che sballano posizione al ridimensionamento HTML e CSS 2
A testo responsivo che si ridimensiona in un div HTML e CSS 3
C SELECT che popola in contemporanea un DIV e un'altra SELECT PHP 12
B Tabelle che si adattano al Div responsive ? HTML e CSS 1
G Testo che si adatta in grandezza alle misure di un DIV: è possibile farlo? HTML e CSS 2
H div linkabili che si spostano. HTML e CSS 0
asevenx struttura DIV realizzata con float: left che si spezza HTML e CSS 3
metalgemini div affiancato che finisce sotto l'altro HTML e CSS 2
V aiuto dreamweaver, div che scorre HTML e CSS 0
A testi che appaiono in un div Javascript 3
emanuelevt testo che si adatta al div HTML e CSS 1
borgo italia div che fa quello che vuole HTML e CSS 1
M Div con immagini ai bordi: IE aggiunge 4pixel in +! (FF perfetto). Che sarà? HTML e CSS 4
Artemisia Div che slittano verticalmente HTML e CSS 5
M Animazione flash che riempie l'intero <div> come fare?? Flash 3
MattiaBergomi [DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini HTML e CSS 9
S Div che segue la barra di navigazione,come?? Javascript 2
G altezza di un div che contiene 2 div float:left HTML e CSS 6
I DIV che appaiono diversamente su IE e FireFox. HTML e CSS 1
P riuscire a porre due div sulla stessa orizzontale senza che vadano a capo HTML e CSS 1
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1

Discussioni simili