2 div dentro un div

**urulela** · 28-02-2008, 11:59

scusate, ho fatto una ricerca ma nonho trovato niente che facci ala caso mio
ipotizziamo un div di 960px, al suo interno vorrei mettere due div in orizzontale sempre ipotizzando uno di 300px e la'tro di 450px
io ne vorrei uno allineato a sx e uno dx
ho provato con il float left/right, ma non funziona. un menù và sopra lìaltro
vi posto l'esempio (menù di navigazione)
http://www.christopher-scott.org/ima...d_fullsize.png
grazie

**fcaldera** · 28-02-2008, 12:20

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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
     

        <style type="text/css">

        #cnt { width: 960px; height: auto; overflow: hidden; border:1px solid red;}
        #adestra { width: 300px; }
        #asinistra { width: 450px; }
        
        div.fl { float: left; display: inline; border:1px solid green;}
        div.fr { float: right; display: inline; border:1px solid green;}
        </style>

    </head>

    <body>
        <div id="cnt">
          <div id="adestra" class="fr">destra</div>
          <div id="asinistra" class="fl">sinistra</div>
        </div>
    </body>
</html>

i border li ho aggiunti solo per mostrarti gli ingombri... puoi eliminarli

**urulela** · 28-02-2008, 12:23

eheheheh e pnsa che ci ho studiato parecchio :rollo:
mi macava definire le classi, io davo float direttamente a ID con la conseguenza di sovrapporli senza affiancarli
grazie e mille

**fcaldera** · 28-02-2008, 12:25

Originariamente inviato da urulela
io davo float direttamente a ID con la conseguenza di sovrapporli senza affiancarli

no mi sa che sbagliavi qualcos'altro: se togli le due classi e usi questo css, l'esempio resta funzionante

codice:

        #cnt { width: 960px; height: auto; overflow: hidden; border:1px solid red;}
        #adestra { width: 300px; float:right; display: inline; }
        #asinistra { width: 450px; float:left; display: inline; }

**urulela** · 28-02-2008, 12:32

ehm... potrebbe dipendere dal display:inline che non ho messo???

**fcaldera** · 28-02-2008, 12:46

Originariamente inviato da urulela
ehm... potrebbe dipendere dal display:inline che non ho messo???

display: inline assicura che non si verifichi il "double margin bug" presente in IE6
http://www.positioniseverything.net/...ed-margin.html

**urulela** · 28-02-2008, 12:49

Originariamente inviato da fcaldera
display: inline assicura che non si verifichi il "double margin bug" presente in IE6
http://www.positioniseverything.net/...ed-margin.html

a questo punto allora non so dove stessi sbagliando, ma so che così funziona

non ti posso nemmeno postare il codice di quello che avevo fatto io, in quanto l'ho cancellato in preda ad una crisi isterica

grazie ancora per la disponibilità

**urulela** · 29-02-2008, 12:51

eheheh pensavo di aver risolt, invece i menù si allinenao come dico io ma mi "allargano" il layout
sii gentile ti post il codice e guarda se qualcosa non va
grazie

codice:

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
       #toolbar {
	width: 960px;
	height: 30px;
	background: url(images/bg_nav.gif) repeat-x;
	overflow: hidden;
    }

#nav li a {
	color: #fff;
}

#nav a:hover {
	color: #fff;
	text-decoration: underline;
}

#nav {
	margin: 0;
	padding: 0;
	height: 30px;
	float: left; 
	display: inline;
}

#nav ul {
	padding: 0;
	margin: 0; 
	margin: 0,
}

#nav li {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}

#nav a {
	background: #000099;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

#nav li.on li.on a {
	text-decoration: underline;
}

#nav li a {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}

/* navbis*/

#navbis li a {
	color: #fff;
}

#navbis a:hover {
	color: #fff;
	text-decoration: underline;
}

#navbis {
	margin: 0;
	padding: 0;
	height: 30px;
	float: right; display: inline;
}

#navbis ul {
	padding: 0;
	margin: 0; 
	margin: 0,
}

#navbis li {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}

#navbis a {
	background: #000099;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

#navbis li.on li.on a {
	text-decoration: underline;
}

#navbis li a {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}
-->
</style></head>

<body>
<div id="toolbar">
	<div id="nav">',template_menu(),'</div>
	<div id="navbis">
	<ul>
	[*]Indice
	[*]Aiuto[*]Ricerca
	[*]Admin
	[/list]
	</div>
	</div>
	</div>
</body>
</html>

il template menu è un script php che genera il menubar del forum

**fcaldera** · 29-02-2008, 13:11

Non è obbligatorio, ma come hai constato NON dare una larghezza ad un blocco flottato porta a queste conseguenze .

Un div cercherà di prendere tutto lo spazio a sua disposizione, quindi assegna una larghezza ai blocchi flottati (guarda l'esempio che ti ho postato più su.....)

Poi dà una larghezza anche al div toolbar e che non sia inferiore alla somma delle larghezze dei du div flottati.

P.s. : Se dai un altezza in pixel a toolbar, allora overflow hidden non serve più... però ti suggerisco di non farlo: metti un bordo attorno a toolbar, ingrandisci il testo (ctrl - + su firefox) e guarda cosa accade...

**urulela** · 04-03-2008, 16:54

ciao fcaldero ero fuori per lavoro

gentilemnte rieci a dirmi dove sbaglio, perchè non stanno nel lyout

codice:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#toolbar {
	width: 960px;
	height: 30px;
	background: url(images/bg_nav.gif) repeat-x bottom;
     }

#nav li.active_menu a {
	background: url(images/toolbar-select.png) 0 0 no-repeat;
}

#nav li a {
	color: #fff;
}

#nav a:hover {
	text-decoration: underline;
}

#nav {
	margin: 0;
	padding: 0;
	height: 30px;
	
}

#nav ul {
	padding: 0;
	margin: 0;
	
	}

#nav li {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
	background:#000099
}

#nav a {
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

#nav li.on li.on a {
	text-decoration: underline;
}

#nav li a {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}


#navbis li.active_menu a {
	background: url(images/toolbar-select.png) 0 0 no-repeat;
}

#navbis li a {
	color: #fff;
}

#navbis a:hover {
	text-decoration: underline;
}

#navbis {
	margin: 0;
	padding: 0;
	height: 30px;
	
}

#navbis ul {
	padding: 0;
	margin: 0;
	
	}

#navbis li {
	margin: 0;
	padding: 0;
	float: right;
	display: block;
	background:#000099
}

#navbis a {
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}

#navbis li.on li.on a {
	text-decoration: underline;
}

#navbis li a {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}
-->
</style></head>

<body>
<div id="toolbar">
	<div id="nav">
	<ul>
	[*]Indice
	[*]Aiuto
	[*]Ricerca
	[*]Admin
	[/list]
	</div>
	<div id="navbis">
	<ul>
	[*]Indice
	[*]Aiuto
	[*]Ricerca
	[*]Admin
	[/list]
	</div>
	</div>
	</div>

</body>
</html>

grazie

Discussione: 2 div dentro un div

Strumenti discussione

Ricerca discussione

Visualizza

2 div dentro un div

Permessi di invio