saludos a todos soy novato con css y tengo un problema al ubicar mis divs. la cuestion es que quiero que salgan uno (div derecho) al lado de los otros no debajo. aqui les dejo el codigo.
index.html
Código PHP:
<!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 sin título</title>
<link href="estilos/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='contenedor'>
<div id='izquierdo'></div>
<div id="navigation" class="container">
<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>
<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
</div>
<div id='derecho'></div>
</div>
</body>
</html>
style.css
Código PHP:
HTML {
HEIGHT: 100%;
}
BODY {
HEIGHT: 100%;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top: 0px;
}
#contenedor{
height: 100%;
width:100%;
}
#izquierdo{
width: 10%;
height: 100%;
background: url(../imagenes/izquierdo.png) repeat-y scroll;
float:left;
position:absolute;
z-index :100;
top: 0px;
left:0px;
}
#derecho
{
width: 80%;
height: 100%;
background:#339933;
float: right;
position:relative;
}
#navigation{/* contiene las imagenes del menu */
width:70px;
background: #CCCCCC;
}
.container{ /* clase del navigation */
margin: 0pt auto;
margin-left:100px;
height: 100%;
margin: 9.5%;
background:#00CCFF;
}
#home, #home div,
#about, #about div,
#services , #services div,
#solutions, #solutions div,
#contact, #contact div {
width:80px;
position:relative;
height:97px;
float:left;
top: 0;
}
#home, #about, #services, #solutions, #contact{
background-image: url(../imagenes/nav.png);
background-attachment: scroll;
background-repeat: no-repeat;
}
/* la posicion de cada item de la imagen comenzando de -30 para q se oculte una parte de la imagen*/
#home{
background-position: -30px 0px;
margin-left:0px;
}
#about{
background-position: -30px -98px;
margin-left:0px;
}
#services{
background-position: -30px -196px;
margin-left:0px;
}
#solutions{
background-position: -30px -294px;
margin-left:0px;
}
#contact{
background-position: -30px -392px;
margin-left:0px;
}
.pri-nav a{
display:block;
text-decoration:none;
text-indent:-30000px;
}
.content{
margin-left:100px;
background:#00FF66;
}
#content-title{
background:#FFFFFF no-repeat scroll;
width: 90%;
height: 100%;
margin-left:100;
}
gracias de antemano por su ayuda