aggangiare un div dentro a un altro div per poter utilizzare float

**markzzz** · 12-03-2010, 18:01

salve. ho un problema (che fino ad adesso non mi si era mai capitato, con la logica che seguivo).

ho la necessità di mettere un div (chiamiamolo main) dentro a un altro div (contenitore).

dentro a questo div devo inserire altri div in posizione float.

il CSS è il seguente :

codice:

div#contenitore{background-color:#FFFFFF; width:980px; margin-left:auto; margin-right:auto; font-weight:bold; font-size:14px; border:1px solid #0000FF;}

        div#main{width:980px; margin-bottom:30px; margin-top:30px;}
	      div#news{width:950px; margin-left:30px; height:30px;}
              div#newsmenu1{width:600px; float:left;}
              div#newsmenu2{width:320px; float:left; margin-right:30px; text-align:right;}

i div son questi :

codice:

<div id="contenitore">
    <div id="main">
          <div id="news">
                <div id="newsmenu1">
                     bla bla bla1
                </div>

                <div id="newsmenu2">
                     bla bla bla1
                </div>
          </div>
    </div>
</div

il problema è che non funziona : i div newsmenu 1 e 2 con il float:left escono dal div news che li contiente, e vanno sotto. non trova quindi la "posizione".

come devo fare? da quanto ho letto :

se sul primo elemento antenato non imposto niente (position=static di default) esso diviene il box contenitore, orientato rispetto ai margini che imposto per esempio. una volta che inserisco i div dentro a questo, i float prendono riferimento al contenitore in cui si trovano.

se devo dirla tutta, non ho mai utilizzato "position" e "top,right,left,bottom" ma sempre e solo float e margin-top/right/left/bottom... solo che in questo caso non sò perchè non funziona...

cordiali saluti

**markzzz** · 12-03-2010, 20:54

ho riscritto tutto e per bene, perchè mi stà facendo impazzire questa cosa : nei precedenti siti che ho fatto ha SEMPRE funzionato, non vedo perchè non debba andare ora.

CSS

codice:

html {height:101%;}
body {background:#FFCC33;}

div#prova1{background-color:#FFFFFF; width:980px; margin-left:auto; margin-right:auto; font-size:14px; border:1px solid #0000FF;}
div#prova2{float:left; width:980px; height:150px; margin-top:20px;}

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
	<head>
		<script type="text/javascript" src="./functions/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="./functions/myjs.js"></script>		

		<title>Calcio Amatori Bigolino Official Website</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="./settings/style.css" title="Style" media="all" />	
	</head>
	
	<body>
		<div id="prova1">
			<div id="prova2">
				ciao
			</div>
		</div>
	</body>
</html>

io voglio che il div prova 2 ENTRI in prova 1, in modo da avere sia il primo "spazio" sopra (rappresentato da quel margin-top:20px) sia il div prova2 con il background di prova 1, cioè bianco (visto che è contenuto e in prova2 per default background ed è trasparente).

non capisco....

**markzzz** · 13-03-2010, 14:21

nessuna idea?

**9sedici** · 13-03-2010, 20:18

Imposta un'altezza anche al primo div, tipo:

div#prova1{background-color:#FFFFFF; width:980px; height:170px; margin-left:auto; margin-right:auto; font-size:14px; border:1px solid #0000FF;}

**markzzz** · 13-03-2010, 20:19

eheh c'ho provato e ho visto che funziona..ma non la voglio impostata. voglio che in base a come siano i successivi si adatti... (e oviamente con height:auto; non funziona)

mi stà facendo sclerare stà cosa non riesco a risolvere...

**9sedici** · 13-03-2010, 20:33

Allora fai così:

<style type="text/css">

</style>
</head>

<body>
<div id="prova1">
<div id="wrapper">
<div id="prova2">
ciao
</div>
</div>
</div>

</body>
</html>

**markzzz** · 13-03-2010, 20:42

uhm...ci siamo quasi...

però me lo fà troppo largo (forse è quel 100%).

me lo fà così quando in realtà lo vorrei così

non riesco a capire perchè non funziona...è come se il primo div "prova1" non lo prendesse come riferimento/contenitore....

**9sedici** · 13-03-2010, 20:50

Prova a non dare valori di colore ecc al prova1, consideralo un contenitore, e inserisci un prova3 che assume le caratteristiche e posizioni del 2 (2 che avrà caratt dell'ex 1)...

**markzzz** · 13-03-2010, 20:55

si così sembra funzionare. il codice finale è questo :
CSS :

codice:

#prova1 {width:100%; height:auto;}
#wrapper {width:980px; margin-left:auto; margin-right:auto; }
div#prova2{float:left; width:980px; float:left; background-color:#FFFFFF; font-size:14px; border:1px solid #0000FF;}
div#prova3{float:left; width:980px; float:left; margin-top:20px; height:90px;}

HTML:

codice:

		<div id="prova1">
			<div id="wrapper">
				<div id="prova2">
					<div id="prova3">
						ciao
					</div>
				</div>
			</div>
		</div>

io non sò voi, ma mi sembra un pò azzardata come cosa...per avere un semplice div contenitore devo utilizzare 3 div???? (prova1,wrapper,prova2)

Discussione: aggangiare un div dentro a un altro div per poter utilizzare float

Strumenti discussione

Ricerca discussione

Visualizza

aggangiare un div dentro a un altro div per poter utilizzare float

Permessi di invio