Div uno sotto all'altro

**djdalle** · 07-05-2008, 22:32

Non riesco a mettere due div uno sotto l'altro automaticamente.
Questi div (come potete vedere) contengono a loro volta due div: uno a sx e uno a dx.
Il problema si presenta solo quando nel div di sx inserisco un immagine. se questa non la inserissi il problema non si presenterebbe.

Quello che vorrei poter fare e mettere uno sotto l'altro due div (anche uguali) a cui ho dato la
class=elenco

Vi rimando alla pagina.

http://sedicisi.altervista.org/ciccio.htm

Questo è il codice

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/stylesite.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="elenco">
        <div class="icona">
        [img]/Immagini/piccolo.jpg[/img]
        </div>
        <div class="disco"> 
        Single dinner Single dinner Single dinner Single dinner Single dinner Single dinner Single dinner Single dinner Single dinner
        </div>
    </div>
</body>
</html>

e questo è il css (solo con le cose necessarie.)

codice:

body {
	margin: 0px;
	padding: 0px;
}
.elenco {margin-left:5%; width:90%;}

.icona {position:absolute; width:20%;}

.disco {position:absolute; margin-left:20%; width:80%;}

Oh mamma!! ho visto adesso che sono tutte sfalsate anche le varie percentuali HEEELP!!!

Cmq quello che vorrei fare,totalmente fluido in base solo alla larghezza della schermata, è questo sono accette anche altre soluzioni
_____________
|,----,,-------,|
||IMG||TESTO||
|'----' '-------'|
'--------------'
_____________
|,----,,-------,|
||IMG||TESTO||
|'----' '-------'|
'--------------'

**Vincent.Zeno** · 08-05-2008, 15:19

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
.elenco {margin-left:5%; width:90%;}

.icona {float:left; width:20%;}

.disco { margin-left:20%; width:80%;}
</style>
</head>

<body>
    <div class="elenco">
        <div class="icona">
        [img]/Immagini/piccolo.jpg[/img]
        </div>
        <div class="disco"> 
        Single dinner Single dinner Single dinner Single dinner Single dinner 
		Single dinner Single dinner Single dinner Single dinner
        </div>
    </div>
    <div class="elenco">
        <div class="icona">
        [img]/Immagini/piccolo.jpg[/img]
        </div>
        <div class="disco"> 
        Single dinner Single dinner Single dinner Single dinner Single dinner 
		Single dinner Single dinner Single dinner Single dinner
        </div>
    </div>
</body>
</html>

**djdalle** · 08-05-2008, 18:00

Uhm...

Ho appena modificato la pagina con I.E. sì vedono i due div elenco uno sotto l'altro... con Firefox invece si accavallano; mi comincia a venire il dubbio che non ci sia soluzione

http://sedicisi.altervista.org/ciccio.htm

Cmq il risultato che si vede in Internet Explorer è quello che cerco

**Hobby** · 08-05-2008, 19:20

Originariamente inviato da djdalle
Uhm...

Ho appena modificato la pagina con I.E. sì vedono i due div elenco uno sotto l'altro... con Firefox invece si accavallano; mi comincia a venire il dubbio che non ci sia soluzione

http://sedicisi.altervista.org/ciccio.htm

Cmq il risultato che si vede in Internet Explorer è quello che cerco

Perchè non c'è soluzione?

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
.elenco {margin-left:5%; width:90%;}

.elenco2 {margin-left: 5%; clear:left;}

.icona {float:left; width:20%;}

.disco { margin-left:20%; width:80%;}
</style>
</head>

<body>
    <div class="elenco">
        <div class="icona">
        [img]immagini/piccolo.jpg[/img]
        </div>
        <div class="disco"> 
        Single dinner Single dinner Single dinner Single dinner Single dinner 
		Single dinner Single dinner Single dinner Single dinner
        </div>
    </div>
    <div class="elenco2">
        <div class="icona">
        [img]immagini/piccolo.jpg[/img]
        </div>
        <div class="disco"> 
        Single dinner Single dinner Single dinner Single dinner Single dinner 
		Single dinner Single dinner Single dinner Single dinner
        </div>
    </div>
</body>
</html>

**Vincent.Zeno** · 08-05-2008, 21:22

riprendi il codice che ho postato ed elimina align="left" dalle immagini
ed aggiungi clear:left; a .elenco

**Hobby** · 08-05-2008, 21:25

Originariamente inviato da Vincent.Zeno
riprendi il codice che ho postato ed elimina align="left" dalle immagini

anche io ho usato il tuo e funziona uguale

**Vincent.Zeno** · 08-05-2008, 21:29

Originariamente inviato da Hobby
anche io ho usato il tuo e funziona uguale

si ma sporca (doppia istruzione che confonde FF)... mi ero dimenticato di toglierlo

**djdalle** · 09-05-2008, 13:30

Evvaiiii!!!

Funziona!!! Grazie mille! Gentilissimi!

Discussione: Div uno sotto all'altro

Strumenti discussione

Ricerca discussione

Visualizza

Div uno sotto all'altro

Permessi di invio