Problema con float en div

[w3w3b]

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:

#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.