Problema lunghezza DIV

**robb.00** · 09-07-2010, 10:25

Ciao a tutti.
Ho un problema con la lunghezza di un DIV (che non mi si ridimensiona in base al contenuto in esso inserito). Nella fattispecie ho una pagina master con 3 DIV principali: "header", "wrapper" e "footer". Il problema è che il wrapper (ossia la parte centrale del sito) non si estende in base al contenuto!!!

Ecco il codice della pagina master:

codice:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>CamminoComune.it</title>
    <meta name="description" content="add your description here" />
<meta name="keywords" content="add your keywords here" />
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <form id="form1" runat="server">
<a name="top"></a>

<div id="header">
<div id="topnav">
	
</div>
			    
[img]images/header.png[/img]
</div>
<div id="wrapper">
<div id="maincontent">
	
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            
            
            <h1>heading 1 text </h1>
		
        </asp:ContentPlaceHolder>
   
    
</div>
<div id="sidebar">
   Chi Siamo | 

	
</div>
</div>
<div id="footer">
	Home Page | 
	Chi Siamo | 
	Articoli | 
	Manifesti | 
	Bacheca | 
	Mailing List | 
	Contatti | 
	Top of Page


</div>

    </form>
</body>
</html>

E i relativi CSS:

codice:

#wrapper
{
    background-image: url("../images/wrapper.png");
    width: 900px;
    text-align: left;
    margin: 0 auto;}

#header {
	width: 900px;
	height: 200px;
    top: 0px;
    left: 0px;}

#topnav {
	position: absolute;
	left: 69px;
	top: 131px;        
	z-index: 1;
	width: 756px;
	text-align: center;
	color: White;
	height: 23px;
	font-size: 90%;}

#maincontent {
	font-size: 90%;
	color: #676767;
	float: left;
	width: 510px;
	padding: 0 10px 0 80px;}

#sidebar {
	font-size: 90%;
	color: #676767;
	float: right;
	width: 185px;
	line-height: 1.5em;
	padding: 0 85px 0 20px;}

#footer {
	background: url("../images/footer.png") no-repeat;
	clear: both;
	padding: 20px 0;
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.7em;
	font-size: 80%;
	width: 900px;
	height: 60px;}

Solo il DIV wrapper, inoltre, mi appare centrato rispetto alla pagina, mentre l'header e il footer sono allineati a sinistra!!! Le ho provate tutte... non so più dove sbattere la testa!! Vi prego... aiutatemi!!

Grazie a chiunque volesse concedermi attenzione!

**Iron83** · 16-07-2010, 15:25

#wrapper
{
background-image: url("../images/wrapper.png");
width: 900px;
text-align: left;
margin: 0 auto;}

Se il problema è sul width prova a togliere il 900px ed inserire width: auto;

**fmortara** · 16-07-2010, 23:23

se invece l'altezza, prova:

height:auto; overflow:hidden;

**robb.00** · 04-08-2010, 09:04

Ho risolto: occorre inserire il div seguente al termine dei due precedenti (header e wrapper). Il div in questione specifica che il margine superiore di un blocco ‘cleared’ è esteso automaticamente fino a quando il blocco si trova completamente sotto gli elementi ‘floatati’. E' un problema di interpretazione di browser!

</div>
<div style="clear:both;"><!– –> </div>
</div>

Magari può essere d'aiuto a qualcun'altro!

Grazie a tutti.

Ciao.

Discussione: Problema lunghezza DIV

Strumenti discussione

Ricerca discussione

Visualizza

Problema lunghezza DIV

Re: Problema lunghezza DIV

Permessi di invio