Problema con float en div

TrinityCore · #1 (**permalink**) 02/05/2016, 20:21

Hola gente, espero esten bien.

Veran, estoy intentando colocar divs uno al lado del otro con "float:left;" pero por algun motivo me aparece uno mas abajo del otro ¿Porque puede ser?

Código CSS:

Ver original#post_galeria{
    border:1px solid #fff;
    min-height:150px;
    padding:10px 10px;
}
#post_galeria #post_img{
    float:left;
}

Espero puedan ayudarme, gracias de antemano!

javy7v · #2 (**permalink**) 03/05/2016, 03:50

Por que usas dos ids distintos ? Es por algo en concreto ?

Puedes hacerlo simplemente asi:

http://codepen.io/anon/pen/ONaaGw

Amiancht · #3 (**permalink**) 03/05/2016, 05:17

Cita:

Iniciado por javy7v

por que usas dos ids distintos ? Es por algo en concreto ?

Puedes hacerlo simplemente asi:

http://codepen.io/anon/pen/onaagw

¡¡¡Error garrafal!!!!

El id debe ser para un único elemento en todo el documento HTML. Esto puede dar problemas de validación, fallos de funccionalidad en javascript, incompatibilidades con ciertos navegadores, y un largo etc...

Y es que las especificaciones del atributo "id", son claras:
https://developer.mozilla.org/en-US/..._attributes/id

Cita:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document.

Para lo que tú dices se usa el atributo "class", es decir así:

Código HTML:

Ver original<html>
  <head>
  </head>
  <body>
    <div class="post_galeria">Uno</div>
    <div class="post_galeria">Dos</div>
  </body>
</html>

Y en CSS:

Código CSS:

Ver original.post_galeria{
    position:relative;
    float:left;
    border:1px solid #000;
    min-height:150px;
    background-color:#0078aa;
    padding:10px 10px;
}

Amiancht · #4 (**permalink**) 03/05/2016, 05:21

Cita:

Iniciado por TrinityCore

Hola gente, espero esten bien.

Veran, estoy intentando colocar divs uno al lado del otro con "float:left;" pero por algun motivo me aparece uno mas abajo del otro ¿Porque puede ser?

Código CSS:

Ver original#post_galeria{
    border:1px solid #fff;
    min-height:150px;
    padding:10px 10px;
}
#post_galeria #post_img{
    float:left;
}

Espero puedan ayudarme, gracias de antemano!

Pasanos el codigo HTML para que sepamos como tienes estructurados los DIVS.

Por lo que yo veo del CSS, veo que tienes un div dentro de otro, #post_galeria tiene dentro a #post_img. Si no es así, y los dos son hijos de un mismo padre, (estan al mismo nivel), entonces el selector CSS está mal (#post_galeria #post_img), le falta una coma que los separe.

Pero vamos, si no tengo codigo HTML, me lo tengo que imaginar, y esa no es la forma correcta de poder ayudarte.

TrinityCore · #5 (**permalink**) 03/05/2016, 12:07

Mostrare bien el code....

Este es el post:

Código HTML:

<div id='post'>
<h1 id='titulo'></h1>
<div id='post_imagen'></div>
<div id='post_fecha'></div>
<div id='post_contenido'></div>
<div id='post_divider'></div>
</div>

Esta es la galeria dentro del #post_contenido

Código HTML:

<div id='post_contenido'>
<div id='post_galeria'>

</div>
</div>

Esta es la imagen dentro del #post_contenido y su vez dentro de #post_galeria

Código HTML:

<div id='post_contenido'>
<div id='post_galeria'>
<div id="post_img">Esta seria la imagen que deberia quedar flotada dentro de galeria, para que asi, en caso de colcoar 10 queden 10 una lado de otra.</div>
</div>
</div>

Código CSS:

Ver original#post_contenido{
    background-color:rgba(0,0,0,0.4);
    border:2px solid #DBDCDD;
    border-radius:0px 4px 4px 4px;
    width:780px;
    margin-left:180px;
    margin-top:10px;
    margin-bottom:20px;
    min-height:150px;
    font-weight:bold;
    font-size:13px;
    padding:10px 10px;
    line-height:20px;
}
#post_galeria{
    min-height:150px;
    padding:10px 10px;
}
#post_img{
    border:1px solid #fff;
    background-position:center center;
    background-size:cover;
    width:100px;
    height:100px;
    float:left;
    cursor:pointer;
}

w3w3b · #6 (**permalink**) 09/05/2016, 04:36

Cita:

Iniciado por TrinityCore

Mostrare bien el code....

Este es el post:

Código HTML:

<div id='post'>
<h1 id='titulo'></h1>
<div id='post_imagen'></div>
<div id='post_fecha'></div>
<div id='post_contenido'></div>
<div id='post_divider'></div>
</div>

Esta es la galeria dentro del #post_contenido

Código HTML:

<div id='post_contenido'>
<div id='post_galeria'>

</div>
</div>

Esta es la imagen dentro del #post_contenido y su vez dentro de #post_galeria

Código HTML:

<div id='post_contenido'>
<div id='post_galeria'>
<div id="post_img">Esta seria la imagen que deberia quedar flotada dentro de galeria, para que asi, en caso de colcoar 10 queden 10 una lado de otra.</div>
</div>
</div>

Código CSS:

Ver original#post_contenido{
    background-color:rgba(0,0,0,0.4);
    border:2px solid #DBDCDD;
    border-radius:0px 4px 4px 4px;
    width:780px;
    margin-left:180px;
    margin-top:10px;
    margin-bottom:20px;
    min-height:150px;
    font-weight:bold;
    font-size:13px;
    padding:10px 10px;
    line-height:20px;
}
#post_galeria{
    min-height:150px;
    padding:10px 10px;
}
#post_img{
    border:1px solid #fff;
    background-position:center center;
    background-size:cover;
    width:100px;
    height:100px;
    float:left;
    cursor:pointer;
}

Yo hace tiempo que intento evitar el uso de float en las maquetaciones por los problemas que puede dar. Si lo que buscas es que dos elementos dentro de un contenedor queden alineados uno al lado del otro te recomiendo usar el display flex en el contenedor padre común a los dos. De ese modo el navegador te los alinea de la forma que buscas. Y evitaras conflictos con el resto de elementos de la web.