[SOLUCIONADO] se me corre el aside de posicion

derleguan · #1 (**permalink**) 29/03/2013, 20:31

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<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style2.css">
<title>Documento sin título</title>
</head>
 
<body>
    <section id="contenedor">
        <section id="principal">
            <H1>LISTA DE PRODUCTO</H1>
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
            <img src="img/fideos.jpg">
        </section>
        <aside><label>lista de intruciones</label></aside>
        
    </section>
 
</body>
</html>

Código CSS:

Ver original*{margin: 0;
padding: 0;
}
 
body{
    background: red;
}
 
section#contenedor{
    background: #000;
    margin: 2em 5em;
    height: 30em;
    border-radius: 2em;
    padding: 1em;
}
 
section #principal{
    overflow-y:visible;
    overflow-x:hidden ;
}
 
section #principal, aside{
    background: #fff;
    width: 79%;
    margin: 0em 0em;
    text-align: center;
    border-radius: 2em;
    display: inline-block;
    height: 30em;
 
}
 
aside{
    width: 20%;
    margin-top: 0px;
}
 
section #principal img{
    background:pink;
    height: 200px;
    padding: 0.1em;
    margin-left: 0.5em;
}

derleguan · #2 (**permalink**) 29/03/2013, 21:35

probando y probando creo aver encontrado la respuesta a mi problema, nose si es la forma pero me io resultado de lo que queria xd con el sieguiente codigo

Código CSS:

Ver originalaside{
    width: 20%;
    margin-left: 80%;
    margin-top: -30em;
}