Foros del Web - Ver Mensaje Individual

rakol · #3 (**permalink**) 03/04/2013, 07:37

Kamae antes de nada muchas gracias por contestar, bien, he realizado lo que me comentas es cierto que al colocar el float este se posiciona al lado en la misma altura, ahora me ocurre otra cosa que no se como resolver... he colocado los 3 cuadros como yo queria pero estos estan fuera de la capa que contiene todo, es decir de la capa contenedora, pego codigo:

Cita:

...
<body>
<div id="contenedor_principal">
<header>
<div id="titulo">
<img src="index_files/titulo3.png"/> </div>
<div id="idiomas">
<ul>
<li><img src="index_files/espana.jpg"/></li>
<li><img src="index_files/ingles.jpg"/></li>
</ul>
</div>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Obras</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>

<article id="galeria-inicio">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1.jpg">
<p class="flex-caption">ejemplo1</p>
</li>
<li>
<img src="img/4.jpg"/>
<p class="flex-caption">aquiponloquequieresquedigatuimagen</p>
</li>
<li>
<img src="img/2.jpg"/>
<p class="flex-caption">ejemplo2</p>
</li>
<li>
<img src="img/3.jpg" />
<p class="flex-caption">ejemplo3</p>
</li>
</ul>
</div>
</article>
</section>

<article>
<div id="contenido_descripccion">
<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1><br>
<p1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx
<br><br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxx</p1>
</div>
<div id="cuadro1">
</div>
<div id="cuadro2">
</div>
</article>

</div>
</body>
</html>

Cita:

#cuadro1 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 55px;
margin-top: -20px;
}

#cuadro2 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 155px;
margin-top: -20px;
}

#cuadro3 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 255px;
margin-top: -20px;
}