-
[CSS] Problema con div
Ho crato un template ma ho un problema con la visualizzazione del div "boxco". In pratica vorrei che il div "boxco" si estendesse con il colore di sfondo da me scelto per tutta la lunghezza dei div "left" e "right".
Il problema sta nel fatto che se io definisco l'height del div "boxco" funziona tutto come vorrei; ma se non la definisco lo sfondo sparisce.
Come faccio a far si che il div "boxco" si addatti all'altezza dei div "left" e "right" contenuti senza però specificarne l'attributo height?
Grazie a tutti in anticipo.
Codice HTML:
<!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" xml:lang="it" lang="it">
<head>
<title>Titolo</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<div id="main">
<div id="header">
<br /><img src="logo.png" alt="img" width="300" height="130" />
</div>
<div id="link">
<ul>
<li><a href="#" class="se">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<div id="boxco">
<div id="left">
<div class="box">
<div class="boxtop">
<img src="go.png" alt="star" /> Testo
</div>
<div class="boxcenter">
Testo
</div>
<div class="boxbottom">
</div>
</div>
<div class="box">
<div class="boxtop">
<img src="go.png" alt="star" /> Testo
</div>
<div class="boxcenter">
Testo
</div>
<div class="boxbottom">
</div>
</div>
<div class="box">
<div class="boxtop">
<img src="go.png" alt="star" /> Testo
</div>
<div class="boxcenter">
Testo
</div>
<div class="boxbottom">
</div>
</div>
</div>
<div id="right">
Testo
</div>
</div>
<div id="boxdo">
Footer
</div>
<div id="boxri">
</div>
</div>
</body>
</html>
Codice HTML:
body{
margin:0px auto;
padding:0px 0px 0px 0px;
background-image:url(../image/background.png);
background-repeat:repeat-x;
color:rgb(100,100,100);
font-family:Verdana;
font-size:12px;
}
a{
color:rgb(180,75,160);
font-weight:bold;
text-decoration:none;
}
/****CORPO****/
#main{
margin:0px auto;
padding:0px 0px 0px 0px;
width:800px;
text-align:center;
}
#header{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image:url(../image/header.png);
width:800px;
height:150px;
}
#link{
margin:50px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:800px;
height:35px;
}
#link ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
}
#link li{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
height:35px;
float:left;
}
#link li a{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
height:35px;
display:block;
background-image:url(../image/b.png);
background-position:0px 35px;
line-height:35px;
color:rgb(180,75,160);
font-weight:bold;
text-decoration:none;
}
#link li a.se{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
height:35px;
display:block;
background-image:url(../image/b2.png);
line-height:35px;
color:rgb(180,75,160);
font-weight:bold;
text-decoration:none;
}
#link li a:hover{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
height:35px;
display:block;
background-image:url(../image/b.png);
background-position:0px 0px;
}
#boxco{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:rgb(240,240,240);
width:800px;
height:300px;
}
#left{
margin:20px 0px 10px 0px;
padding:0px 0px 0px 0px;
width:200px;
float:left;
}
.box{
margin:0px 0px 10px 10px;
padding:0px 0px 0px 0px;
width:180px;
text-align:left;
}
.boxtop{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 15px;
background-image:url(../image/lefttop.png);
background-repeat:no-repeat;
width:180px;
height:30px;
line-height:30px;
font-weight:bold;
}
.boxcenter{
margin:0px 0px 0px 0px;
padding:0px 10px 0px 10px;
width:180px;
background-image:url(../image/leftcenter.png);
background-repeat:repeat-y;
}
.boxbottom{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image:url(../image/leftbottom.png);
background-repeat:no-repeat;
width:180px;
height:30px;
line-height:30px;
}
#right{
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
width:600px;
float:right;
}
#boxdo{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:800px;
height:35px;
background-image:url(../image/boxdo.png);
line-height:35px;
clear:both;
}
#boxri{
margin:2px 0px 50px 0px;
padding:0px 0px 0px 0px;
width:800px;
height:35px;
background-image:url(../image/boxri.png);
}
-
-
Innanzitutto grazie per i links...
Ho letto sia il primo che il secondo articolo...tuttavia non ho bene capito come adattare gli esempi al mio caso. Ho provato a inserire "position:absolute; top:235px;" a "#boxco" e si visualizza correttamente ma il problema poi resta nel footer che si sovrappone al div. Nel primo articolo non mi sembra di aver letto nessun attributo da dare al footer.
Come posso procedere adesso? Grazie
-
whops, scusami assai, ti ho dato i link sbagliat :mrgreen:
Le due tecniche sopra servono per rendere due o più colonne della stessa altezza (absolute columns) o fingere che lo siano (faux columns). A te invece serve forzare un contenitore affinché effettivamente contenga due div a cui è stato applicato un float.
Ti serve perciò il clearfix. L'articolo è lungo magari, ma se cerchi qua su altervista ci sono già una mezza dozzina di discussioni sul clearfix, molto simili al tuo problema :wink:
