[SOLUCIONADO] Duda con orden de divs

elias89 · #1 (**permalink**) 24/02/2013, 16:10

Hola! soy nuevo en el foro, y nuevo en lo que es Diseño web, soy estudiante de diseño grafico en la Universidad de Buenos Aires, el tema es el siguiente, no puedo ordenar los divs, tengo dos Articles, y no puedo hacer q se pongan uno al lado del otro, pose float left a ambos todo, pero nada de nada pasa. aca dejo una img de como queda, y tmb pego parte del codigo.

y acá el código css (no se si lo tengo q poner asi, sory es mi primera ves en esto de web)

article {margin-top:90px;
width: 460px;
display:block;
float:left;
margin-left:AUTO;
}

article p {
}

article h2 {
font-family: 'Alfa Slab One', cursive;
background-color:#000;
color:#FFF;
}

#art1 { width:250px;
height:400px;
background-image:url(img%20web%20upload/aside.jpg);
float: left;
position:relative;
}

hugo_acosta · #2 (**permalink**) 24/02/2013, 16:30

Hola!

Puede deberse a que el contenedor de estas etiquetas es de menor tamaño (considerando el margin y padding).

Para poner elementos en la misma línea puedes usar tambien: Display: inline-block;

Si ya estas usando la etiqueta <article> usa entonces la de <aside/> en vez del div "#art1"

Espero sea de utilidad, es mi primer participación en este foro.

Saludos!

gebremswar · #3 (**permalink**) 24/02/2013, 18:09

Hola elias89, que tal.

Nos compartiste tu CSS, pero y el HTML? Era necesario.

Prueba este ejemplo:

Código CSS:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>@GBreagan</title>
  <style>
    #wrapper {
      background-color: #ffffff;
      height: auto;
      margin: 0 auto;
      width: 960px;
      font-size: 0
    }
    #wrapper article {
      display: inline-block;
      height: 360px;
      width: 480px
    }
    #wrapper .left {
      background-color: bcbcbc
    }
    #wrapper .right {
      background-color: f3f3f3
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <article class="left"></article>
    <article class="right"></article>
  </div>
</body>
</html>

P.D.: Para compartir codigo usa el Highlight

elias89 · #4 (**permalink**) 24/02/2013, 18:34

Hola! gracias ya lo pude solucionar con lo que me dijeron, era que tenia mucho margin en uno, no me había dado cuenta jaja, muchas gracias!! =D