Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/03/2013, 20:31
Avatar de derleguan
derleguan
 
Fecha de Ingreso: abril-2012
Mensajes: 26
Antigüedad: 12 años
Puntos: 1
se me corre el aside de posicion

hola, estoy praticando con css3 y no puedo hacer que section y aside quede en paralelo al ponerle datos al section el aside se desplaza hacia abajo nose que tengo mal le dejo el codigo que e ralizado espero me puedan guiar con css



Código HTML:
Ver original
  1. <!DOCTYPE HTML>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <link rel="stylesheet" href="style2.css">
  4. <title>Documento sin título</title>
  5. </head>
  6.  
  7.     <section id="contenedor">
  8.         <section id="principal">
  9.             <H1>LISTA DE PRODUCTO</H1>
  10.             <img src="img/fideos.jpg">
  11.             <img src="img/fideos.jpg">
  12.             <img src="img/fideos.jpg">
  13.             <img src="img/fideos.jpg">
  14.             <img src="img/fideos.jpg">
  15.             <img src="img/fideos.jpg">
  16.             <img src="img/fideos.jpg">
  17.         </section>
  18.         <aside><label>lista de intruciones</label></aside>
  19.        
  20.     </section>
  21.  
  22. </body>
  23. </html>



Código CSS:
Ver original
  1. *{margin: 0;
  2. padding: 0;
  3. }
  4.  
  5. body{
  6.     background: red;
  7. }
  8.  
  9. section#contenedor{
  10.     background: #000;
  11.     margin: 2em 5em;
  12.     height: 30em;
  13.     border-radius: 2em;
  14.     padding: 1em;
  15. }
  16.  
  17. section #principal{
  18.     overflow-y:visible;
  19.     overflow-x:hidden ;
  20. }
  21.  
  22. section #principal, aside{
  23.     background: #fff;
  24.     width: 79%;
  25.     margin: 0em 0em;
  26.     text-align: center;
  27.     border-radius: 2em;
  28.     display: inline-block;
  29.     height: 30em;
  30.  
  31. }
  32.  
  33. aside{
  34.     width: 20%;
  35.     margin-top: 0px;
  36. }
  37.  
  38. section #principal img{
  39.     background:pink;
  40.     height: 200px;
  41.     padding: 0.1em;
  42.     margin-left: 0.5em;
  43. }

Última edición por derleguan; 29/03/2013 a las 20:45