div annidati adattabili

**joint77** · 17-06-2009, 11:05

Ciao a tutti ho un problema, sto costruendo un layout per me un po complesso ma che credo possa servirmi anche in futuro. Prevede un contenitore e all'interno 3 altri div i due laterali che contengono 2 div, uno con grafica (è un div a dimensione fissa) e uno con pattern adattabile (anche a manina da html).
C'è però un fatto, quando metto la proprietà margin-left al div centrale (quello che conterrà la edit region) il div contenitore non si adatta come dovrebbe.

vi posto i codice, se sapete dirmi quello che non funziona ve ne sarò grato

css:

codice:

@charset "utf-8";
/* CSS Document */
.head {
margin-left:auto;
margin-right:auto;
width:962px;
height:10px;
background-color:#0000CC;
}

.foot {
margin-left:auto;
margin-right:auto;
width:962px;
height:10px;
background-color:#0000CC;
}

.cont_pricipale {
width:962px;
min-height: 200px;
height: auto !important;
margin-left:auto;
margin-right:auto;
background-color:#0066CC;
}

.cont_sx {
float:left;
width:106px;
min-height: 200px;
height: auto !important;
background-color:#00CC66;
}

.cont_dx {
float:left;
width:106px;
min-height: 200px;
height: auto !important;
background-color:#00CC66;
}

.edit_region {
float:left;
width:750px;
min-height: 200px;
height: auto !important;
background-color:#FF0000;
}

.img_sx {
width:106px;
height:20px;
background-color:#FFFF00;
}

.blocco_sx {
width:106px;
min-height: 50px;
height: auto !important;
background-color:#CC99FF;
}


.img_dx {
width:106px;
height:20px;
background-color:#FFFF00;
}

.blocco_dx {
width:106px;
min-height: 50px;
height: auto !important;
background-color:#CC99FF;
}

html

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=utf-8" />
<title>Documento senza titolo</title>
<link href="css/prova.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head"></div>
<div class="cont_pricipale">
<div class="cont_sx">
<div class="img_sx"></div>
<div class="blocco_sx"></div>
</div>
<div class="edit_region"></div>
<div class="cont_dx">
<div class="blocco_dx"></div>
<div class="img_dx"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>

Comunque vorrei fare una cosa come spiegato da immagine layout.gif.
Grazie ancora.

**joint77** · 18-06-2009, 16:11

Ok parzialmente risolto

Discussione: div annidati adattabili

Strumenti discussione

Ricerca discussione

Visualizza

Ciao, problema con div annidati adattabili

Permessi di invio