Problema con div e overflow:auto;

**ciammarica** · 08-08-2007, 20:01

Ciao a tutti,
ho realizzato un template che, tra gli altri, contiene 3 div, uno centrale (quello grigio), uno a destra (delimitato dalla linea nera) e uno in basso (delimitato dalla linea rossa):

I tre div si allineano perfettamente come desidero, pero' se nel div centrale metto overflow: auto; (cosa che mi serve, perche' il contenuto deve potersi scrollare se supera le dimensioni del div) gli altri due div, non so per quale motivo, finiscono all'interno del primo, cosi':

Come posso evitare cio'?

**ciammarica** · 09-08-2007, 08:27

Ah, dimenticavo... ovviamente i 3 div sono "fratelli", cioe' nel codice html sono posti allo stesso livello, all'interno di un div piu' grande che li contiene tutti e tre.
Proprio non mi spiego questo strano comportamento...
Nessuna idea?

:master:

**PNK89** · 09-08-2007, 09:23

Posta il codice o il link così posso cercare d'aiutarti.

**ciammarica** · 09-08-2007, 21:07

il codice del css e' questo:

(#rightmenu e #footer sono i due div delimitati dai bordi, mentre #bodycontent e' il div dove devo mettere overflow: auto

codice:

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
	color: #8E959B;
}


#container {

	float: auto;
	width: 800px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menuleft {

	float:left;
	width: 69px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background: url(../images/menu_left.gif) no-repeat;
}


#content {

	width: 731px;
	height: 600px;
	margin: 0 auto;
	margin-left: 69px;
}


#menucontainer {
	
	float: left;
	width: 535px;
	height: 154px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menu {

	width: 535px;
	height: 102px;
	
}


#menuimgs {

	position: relative;
	width: 535px;
	height: 83px;
}


#menulabels {
	
	position: relative;
	width: 535px;
	height: 19px;
}


#home {

	position: relative;
	width: 114px;
	height: 83px;
    background: url(../images/home_off.gif) no-repeat;
}



#fumetti {

	position: relative;
	width: 116px;
	height: 83px;
	margin-left: 114px;
    background: url(../images/fumetti_off.gif) no-repeat;
    
}


#illustrazioni {

	position: relative;
	width: 108px;
	height: 83px;
	margin-left: 116px;
    background: url(../images/illustrazioni_off.gif) no-repeat;
}


#vignette {

	position: relative;
	width: 78px;
	height: 83px;
	margin-left: 108px;
    background: url(../images/vignette_off.gif) no-repeat;
}


#argilla {

	position: relative;
	width: 119px;
	height: 83px;
	margin-left: 78px;
    background: url(../images/argilla_off.gif) no-repeat;
}


#home_label {

	position: relative;
	width: 114px;
	height: 19px;
	margin-left: -338px;
    background: url(../images/home_label.gif) no-repeat;
}


#fumetti_label {

	position: relative;
	width: 116px;
	height: 19px;
	margin-left: 114px;
    background: url(../images/fumetti_label.gif) no-repeat;
}


#illustrazioni_label {

	position: relative;
	width: 108px;
	height: 19px;
	margin-left: 116px;
    background: url(../images/illustrazioni_label.gif) no-repeat;
}


#vignette_label {

	position: relative;
	width: 78px;
	height: 19px;
	margin-left: 108px;
    background: url(../images/vignette_label.gif) no-repeat;
}


#argilla_label {

	position: absolute;
	width: 119px;
	height: 19px;
	margin-left: 78px;
    background: url(../images/argilla_label.gif) no-repeat;
}


#menutop {

	position:absolute;
	float: left;
	width: 535px;
	height: 52px;
	margin-left: -230px;
    background: url(../images/menu_top.gif) no-repeat;
}


#logo {
	
	position: absolute;
	width: 196px;
	height: 154px;
	margin-left: 305px;
	margin-top: -102px;
	background: url(../images/logo.gif) no-repeat;
}


#leftmenu_news {

	position: absolute;
	margin-left: -535px;
	margin-top: 154px;
	width: 210px;
	height: 446px;
}


#bodycontent {

	position: absolute;
	width: 336px;
	height: 368px;
	margin-top: -446px;
	margin-left: 210px;
	background-color: #e5e5e5;
}


#rightmenu {
	
	position: absolute;
	width: 185px;
	height: 368px;
	margin-left: 336px;
	border: 1px solid #000000;
}


#menu_inner {

	position: absolute;
	width: 210px;
	height: 23px;
	background: url(../images/menu_inner.gif) no-repeat;
}


#menu_content {

	position: absolute;
	width: 140px;
	height: 219px;
	margin-top: 23px;
	background: url(../images/menu_content.gif) no-repeat;
}


#menu_bottom {

	position: absolute;
	width: 140px;
	height: 57px;
	margin-top: 219px;
	background: url(../images/menu_bottom.gif) no-repeat;
}


#news_content {

	position: absolute;
	width: 140px;
	height: 116px;
	margin-top: 57px;
	background: url(../images/news_content.gif) no-repeat;
}


#news_bottom {

	position: absolute;
	width: 140px;
	height: 31px;
	margin-top: 116px;
	background: url(../images/news_bottom.gif) no-repeat;
}


#menu_news_right {

	position: relative;
	width: 70px;
	height: 423px;
	margin-top: -392px;
	margin-left: 140px;
	background: url(../images/menu_right.gif) no-repeat;
}


#footer {

	position: absolute;
	width: 521px;
	height: 78px;
	margin-top: 368px;
	border: 1px solid #e42145;
}


#body_bottom {

	position: absolute;
	width: 453px;
	height: 29px;
	margin-top: 0px;
	margin-left: 0px;
	background: url(../images/body_bottom.gif) no-repeat;
}

Questo invece e' il codice HTML della pagina:

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>
	
		<title>Prova</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="css/default.css" rel="stylesheet" type="text/css" />
		
	</head>

	<body>

		<div id="container">
		
			<div id="menuleft"/>
			
			
			<div id="content">
				
				<div id="menucontainer">
		
					<div id="menu">
					
						<div id="menuimgs">
		
							<div id="home"/>
							<div id="fumetti"/>
							<div id="illustrazioni"/>
							<div id="vignette"/>
							<div id="argilla"/>
							
						</div>
						
						<div id="menulabels">	
							
							<div id="home_label"/>
							<div id="fumetti_label"/>
							<div id="illustrazioni_label"/>
							<div id="vignette_label"/>
							<div id="argilla_label"/>
						
						</div>
						
					</div>
					
					<div id="menutop"/>
						
				</div>
				
				<div id="logo"/>
				
				<div id="leftmenu_news">
				
					<div id="menu_inner"/>
					<div id="menu_content"/>
					<div id="menu_bottom"/>
					<div id="news_content"/>
					<div id="news_bottom"/>
					<div id="menu_news_right"/>
				
				</div>
				
				<div id="bodycontent"/>
				
				
				<div id="rightmenu">
				
				
				</div>
				
				
				<div id="footer">
				
					<div id="body_bottom"/>					
				
				</div>
					
			</div>
			
		</div>	
		
	</body>
	
</html>

Grazie!

**PNK89** · 10-08-2007, 11:47

non mi sembra ci sia niente di male.... l'unica cosa che ti posso consigliare e di non usare la shorttag per bodycontent prova con

codice:

<div id="bodycontent">
</div>

Provando in questo modo a me non include i div all'interno di quello che scrolla....

**ciammarica** · 10-08-2007, 12:06

cavolo, pensavo fosse equivalente scrivere

<div id="bodycontent"/>

e

<div id="bodycontent">
</div>

invece a quanto pare le cose cambiano!

Grazie

Discussione: Problema con div e overflow:auto;

Strumenti discussione

Ricerca discussione

Visualizza

Problema con div e overflow:auto;

Permessi di invio