Centrare sito

**E|ena** · 26-06-2008, 14:10

ho un problema
il mio sito è contenuto in un div
se uso questi css si formatta

div { width: xxx; margin: 0 auto}

se però il div ha float left finisce a sinistra (devo mettere il left perchè contiene altri div che hanno float left)

come posso rimetterlo al centro?

**pastoweb** · 26-06-2008, 14:14

Devi dare il float solo ai div inclusi, non al contenitore

**E|ena** · 26-06-2008, 14:15

ho provato ma c'è un problema secondario
se non lo do al contenitore in mozilla praticamente i div col float escono dal contenitore

per capirci il contenitore pensa di essere vuoto e se ha un bordo diventa piccolissimo

**pastoweb** · 26-06-2008, 14:27

Prova a postare un link, o almeno il codice

**gengix** · 26-06-2008, 15:00

ho provato ma c'è un problema secondario
se non lo do al contenitore in mozilla praticamente i div col float escono dal contenitore

per capirci il contenitore pensa di essere vuoto e se ha un bordo diventa piccolissim

è il problema del clear.
O attribuisci la proprietà clear ad uno degli elementi contenuti dentro al div.

Oppure utilizzi il metodo dell'easyclearing:
http://positioniseverything.net/easyclearing.html

**E|ena** · 27-06-2008, 09:50

posto il codice cosi sono più chiara
cosi va tutto bene, è centrato in automatico

codice:

<div style="border: 1px solid red; width: 300px; margin: 0 auto">
        <div>
            Contenuto1</div>
        <div>
            Contenuto2</div>
    </div>

se invece lo metto cosi

codice:

<div style="border: 1px solid red; width: 400px; margin: 0 auto">
        <div style="width: 150px; float: left; border: 1px solid green">
            Contenuto1</div>
        <div style="width: 150px; float: left; border: 1px solid green">
            Contenuto2</div>
    </div>

in ie va tutto bene, in mozilla il primo div sembra non contenere gli altri a meno che non ha il left
ma se metto il left non sta più in centro

**gengix** · 27-06-2008, 10:09

Sei stata chiara fin dall'inizio=), la soluzione te l'ho già data prima.

Ti faccio un esempio così capisci meglio.

1) O attribuisci la proprietà clear ad uno degli elementi contenuti dentro al div.

cioè:

codice:

<div style="border: 1px solid red; width: 400px; margin: 0 auto">
    <div style="width: 150px; float: left; border: 1px solid green">Contenuto1</div>
    <div style="width: 150px; float: left; border: 1px solid green">Contenuto2</div>
    <div style="clear:both;"></div>
</div>

Questo presuppone che tu inserisca un nuovo div con questa proprietà.

2) Oppure utilizzi il metodo dell'easyclearing.
Te lo faccio vedere in maniera più corretta, senza dichiarare stili inline come hai fatto te.

codice:

<!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" lang="it" xml:lang="it">
	<head>
		<title></title>
		<style type="text/css">
		* {
		margin:0;
		padding:0;
		}
		body {
		text-align:center;
		}
		#box {
		margin:auto;
		width:400px;
		border:solid 1px red;
		}
		#box:after {
		content:".";
		clear:both;
		display:block;
		visibility:hidden;
		height:0;
		}
		#box div{
		float:left;
		width:150px;
		border:solid 1px green;
		}
		</style>
	</head>
	<body>
		<div id="box">
			<div>

Contenuto1</p></div>
			<div>

Contenuto2</p></div>
		</div>
	</body>
</html>

**E|ena** · 27-06-2008, 10:16

mi spiegheresti il secondo metodo? non riesco a capire come funzioni

**gengix** · 27-06-2008, 10:21

Illustrato da gente che spiega meglio di me=)

In italiano:
http://www.css-zibaldone.com/traduzi...ing/index.html

In inglese:
http://positioniseverything.net/easyclearing.html

Discussione: Centrare sito

Strumenti discussione

Ricerca discussione

Visualizza

Centrare sito

Permessi di invio