div che non si estende oltre il flot:left

asevenx · 30 Mag 2013

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?

Fez Vrasta · 30 Mag 2013

<body> è alto quanto il contenuto della pagina, non quanto window.

Assegna questa classe a <body> per renderlo alto quanto la pagina

Codice:

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

Ne han parlato su CSS Tricks giusto qualche giorno fa
http://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

asevenx · 30 Mag 2013

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

Fez Vrasta · 30 Mag 2013

è quello che fa il mio codice.

Jonn · 30 Mag 2013

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> 

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;

Fez Vrasta · 31 Mag 2013

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 · 31 Mag 2013

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 · 31 Mag 2013

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 · 31 Mag 2013

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 · 31 Mag 2013

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 · 31 Mag 2013

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:

Fez Vrasta · 31 Mag 2013

Senti fai un po' come ti pare.

Cerca

Cerca

div che non si estende oltre il flot:left

asevenx

Utente Attivo

Fez Vrasta

Utente Attivo

asevenx

Utente Attivo

Fez Vrasta

Utente Attivo

Jonn

Utente Attivo

Fez Vrasta

Utente Attivo

Jonn

Utente Attivo

Fez Vrasta

Utente Attivo

Jonn

Utente Attivo

Fez Vrasta

Utente Attivo

Jonn

Utente Attivo

Fez Vrasta

Utente Attivo

Discussioni simili