affiancare due DIV

lucaeffe

affiancare due DIV

Posto prima i codici :

HTML

<body>

<div id="header">
<ul id="menu">
<li class="vocecorrente"><a href="home-page.html"><strong>Home</strong></a></li>
<li><a href="il-nostro-team.html"><strong>Il nostro Team</strong></a></li>
<li><a href="partners.html"><strong>Partners</strong></a></li>
<li><a href="#"><strong>Servizi</strong></a></li>
</ul></div>

</div>

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 0;
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;

}

display:inline;
}

caratteristiche della voce del menu selezionata/
color:#FC0;
text-decoration: none;
}

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;
}

color:#FC0;

}

#footer{
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
height:220px;
width:100%;
}

Il mio problema,come da titolo, è il non riuscire ad affiancare due div.
Piu precisamente quelli contenuti in "navigation" e cioè testo_img e separatore.

Infatti non riesco in alcun modo a farli stare affianco tanto chè il div separatore và sempre giu allungando in altezza il div navigation.

Il div separatore contiene solamente una linea per separare i contenuti dei testi dalle foto.

marcocarrieri

Hai provato ad impostare sui div il "float:left" ?

gabriele1986

Ciao impostando il float left funziona eccoti il codice



<head>
<title>Esempio Div</title>
<style type="text/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;
padding:0;
background-color:#000;
float:left;
}
#separatore{
width:25px;
height:300px;
padding:0;
margin:0 auto;
background-color:red;
float:left;
}
 
#menu{
width:20px;
list-style:none;
overflow:hidden;
width:100%;
float:left;
padding:1px;
margin:30px 0 0 0;
}
 li{
display:inline;
}  li.vocecorrente a{ /*caratteristiche della voce del menu selezionata*/
color:#FC0;
text-decoration: none;
}
 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:#000;
line-height:25px;
} a:hover{
color:#FC0;
} 
 
#footer{
margin:0 auto;
padding:0;
height:220px;
width:100%;
}
</style>
</head>
<body>
<div id="header">
<ul id="menu">
<li class="vocecorrente"><a href="home-page.html"><strong>Home</strong></a></li>
<li><a href="il-nostro-team.html"><strong>Il nostro Team</strong></a></li>
<li><a href="partners.html"><strong>Partners</strong></a></li>
<li><a href="#"><strong>Servizi</strong></a></li>
</ul></div>
<div id="navigation">
<div id="testo_img"></div>
<div id="separatore"><img src= "images/linea.jpg" width="17" height="300" /></div>
</div> 
<div id="footer"></div>
</body>
</html>