Firefox e problemi con float

**scar81** · 29-08-2008, 10:24

Ho un sito a tre colonne A,B e C. A ha float left, e C ha float right, un classico...
Nella colonna centrale ho del testo con foto allineate un po' a destra e un po' a sinistra. Io vorrei mettere un comando che mi vada a capo, senza che il testo successivo stia a fianco dell'ultima foto.

Sia mettendo il classico <br clear=all> che un div con style clear: both mi succede che in Firefox il testo successivo vada in fondo al sito. Praticamente il clear agisce non solo sul contenuto della colonna B, ma anche sui float delle colonne A e C.

Aiuto!!

**gengix** · 29-08-2008, 10:47

Partendo dal presupposto che il classico <br clear=all> non è tanto "classico" dal momento che "all" non è un valore esistente per la proprietà clear e al massimo la sintassi potrebbe essere

codice:

<br style="clear:il tuo valore;" />

Validando il codice vedresti quello che dico.

I flloat e il clear sono proprietà particolari che dipendono anche da come sono disposti gli elementi tra di loro.

Senza vedere una riga di codice diventa difficile aiutarti.

**scar81** · 29-08-2008, 17:26

Cerco di esemplificare
<style>
div#menu_left{
float: left;
width: 220px;
}
div#menu_right{
float:right;
width: 200px;
}
div#centrale{
margin: 0 200px 0 220px;
}
</style>

<div id="menu_left">QUI C'E' IL MENU SINISTRO</div>
<div id="centrale">
[img]foto.jpg[/img]Testo che voglio affiancato alla foto

<br style="clear:both;" />
Testo che voglio sotto la foto
</div>
<div id="menu_right">QUI C'E' IL MENU DESTRO</div>

Praticamente il "Testo che voglio sotto la foto" non solo va sotto la foto ma addirittura sotto il contenuto dei menu laterali, praticamente il clear agisce su tutto!!

**gengix** · 29-08-2008, 18:04

Prova

codice:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="formazione_Default6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    div#container {
    height:1%;
    }
    div#container:after {
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    }
    div#left {
    float:left;
    width:220px;
    background:yellow;
    }
    div#right {
    float:right;
    width:200px;
    background:green;
    }
    div#center {
    margin:0 200px 0 220px;
    height:1%;
    background:red;
    }
    div#center:after {
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    }
    div#center img {
    float:left;
    width:200px;/*esempio*/
    }
    div#center p {
    margin-left:210px;/*esempio*/
    }
    p.txtDown {
    clear:both;
    margin-left:220px;/*esempio*/
    }
    </style>
</head>
<body>
	<div id="container">
		<div id="left">

sinistra</p></div>
		<div id="right">

destra</p></div>
		<div id="center">
			[img]europe_empty.jpg[/img]
			

Testo che voglio affiancato alla foto</p>
		</div>
		<p class="txtDown">Testo che voglio sotto la foto</p>
	</div>
</body>
</html>

occhio al bug dei 3 px con IE6

**scar81** · 01-09-2008, 08:29

No purtroppo non funziona. Innanzitutto quel con container height:1% mi fa sparire lo sfondo bianco del layer e poi comunque non funziona, il testo va comunque in fondo alla pagina, subito dopo la fine del menu.

E sì che basterebbe aver messo una bella TABLE ad impaginare il tutto......

**gengix** · 01-09-2008, 08:55

Per prima cosa le tabelle si utilizzano per intabellare dati e non per costruire la struttura di un sito.
Se il testo che vuoi sotto la foto ha a che fare con la foto, la soluzione che vuoi te non è molto pratica, perchè se il testo all'interno delle colonne laterali supera l'altezza della foto, la descrizione in basso si allontana.

Innanzitutto quel con container height:1% mi fa sparire lo sfondo bianco del layer e poi comunque non funziona

Quale sfondo?? quale layer intendi ?? Spiegati meglio allora quando posti il codice e fai capire bene cosa vuoi fare esattamente.

Sul fatto che non funzioni sono perplesso, cosa non funziona?? Quello che ti ho postato è un normale layout a 3 colonne.

P.S Gli sfondi colorati te li ho inseriti semplicemente per farti vedere i blocchi!!

**scar81** · 01-09-2008, 09:01

Lo so cosa servono le tabelle, ma se in questo caso ne avessi usata almeno una per dividere le tre colonne (tre semplici <td></td>), poi al suo interno avrei potuto usare comodamente i clear per andare a capo, senza avere problemi con le colonne laterali.

Per lo sfondo intendo che il layer "container" ha lo sfondo bianco, mettendogli height 1% i contenuti si vedono comunque, perchè escono, ma il layer si schiaccia e praticamente non si vede lo sfondo.

**gengix** · 01-09-2008, 09:03

codice:

Per lo sfondo intendo che il layer "container" ha lo sfondo bianco, mettendogli height 1% i contenuti si vedono comunque, perchè escono, ma il layer si schiaccia e praticamente non si vede lo sfondo.

Esce dove?? su che browser stai testando??

**scar81** · 01-09-2008, 09:08

Firefox ed Explorer.

**gengix** · 01-09-2008, 09:15

A me non tornano i conti scar81

Quel :

codice:

    div#container {
    height:1%;
    }
    div#container:after {
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    }

é una soluzione per evitare quello che dici te, si chiama easyclearing:
http://www.css-zibaldone.com/traduzi...ing/index.html
In effetti in questo caso c'è già un elemento con il clear che è il paragrafo e quindi possono essere rimossi.
Anche presenti cmq non creano danni in questo caso, i danni che dici te.

Dunque io sto testando su IE5.5/IE6/IE7/IE8 beta Firefox, Opera, Netscape, K meleon e altri browser e il non mi da i problemi che dici te.
Com'è sta storia?

Cmq non hai risposto alla domanda che ti ho fatto all'inizio: a cosa ti serve il testo sotto la foto??

Discussione: Firefox e problemi con float

Strumenti discussione

Ricerca discussione

Visualizza

Firefox e problemi con float

Permessi di invio