Posto prima i codici :
CSS :
body{
background:#FFF;
margin:0 auto;
padding:0;
width:1260px;
height:600px;
}
#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
width:100%;
height:120px;
margin:0 auto;
}
#navigation{
background-color:#FFF;
width:100%;
height:430px;
margin:0 auto;
padding:0;
}
#testo_img{
background-image:url(images/testo-home-page.jpg);
background-repeat:no-repeat;
height:430px;
width:600px;
margin:10px 0 0 50px;
padding:0;
}
#separatore{
width:25px;
height:300px;
padding:0;
margin:0 auto;
}
#menu{
width:20px;
list-style:none;
overflow:hidden;
width:100%;
float:left;
padding:1px;
margin:30px 0 0 0;
}
#menu li{
display:inline;
}
#menu li.vocecorrente a{ /*caratteristiche della voce del menu selezionata*/
color:#FC0;
text-decoration: none;
}
#menu a{
display:block;
float:left;
padding-rigth:90px;
height:25px;
margin-left:125px;
padding-left:65px;
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
font-size:14px;
text-decoration:none;
color:#FFF;
line-height:25px;
}
#menu a:hover{
color:#FC0;
}
#footer{
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
height:220px;
width:100%;
}
HTML
<body>
<div id="header">
<ul id="menu">
<li class="vocecorrente">Home[*]Il nostro Team[*]Partners[*]Servizi[/list]</div>
<div id="navigation">
<div id="testo_img"></div>
<div id="separatore">[img]images/linea.jpg[/img]</div>
</div>
<div id="footer"></div>
</body>
</html>
Come da foto e titolo vorrei affiancare i due div quali "separatore" che è quello verde e "testo_img" che è quello rosso,contenuti entrambi nel div "navigation"
Come cerco di spiegar nella foto quello che voglio ottenere è il caso A ma ottengo solamente il caso B.
Non riesco ad affiancare il div verde a quello rosso,infatti il verde si posiziona sotto il rosso allargando in altezza il loro contenitore "navigation"
Ho provato e riprovato ma non ne vengo fuori!!!
Rispondi quotando