[SOLUCIONADO] Problema con Float Left

[chichote]

Hola Amigos de FDW.

Tengo un pequeño problema, haber si alguien me da una idea.

En la siguiente imagen se muestra como debe ser, y como se ve.



La primera opcion es como debe verse.

Lo que hice, fue basicamente poner un float left a la imagen y un margen-right de 15px;

IMPORTANTE: No quiero darle un width definido a todos los elementos, ya que es una plantilla responsive y eso se adapta con bootstrap.

Toda ayuda será bienvenida.

Saludos.

[pzin]

Parece mentira que no pongas código.

¿No te vale con poner el texto como un párrafo? Que siendo un elemento de bloque ocuparía su propia linea. O poner la imagen flotada como dices que tienes y hacer un contenedor para lo demás, también flotado.

[chichote]

Iniciado por Bonez

Parece mentira que no pongas código.

¿No te vale con poner el texto como un párrafo? Que siendo un elemento de bloque ocuparía su propia linea. O poner la imagen flotada como dices que tienes y hacer un contenedor para lo demás, también flotado.

La estructura básica es la siguiente

Código HTML:

<!-- Inicio Usuario en Listado -->
<div class="lista-usuario">
     <div>
          <div class="img">
               <a href=""><img src="uploads/usuarios/01.jpg" /></a>
          </div>
          
          <h4><a href="">Mauricio Monsalve</a></h4>
          
          <div class="estrellas">
               <ul id="1" class="activo">
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
               </ul>
          </div>
          
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Porttitor et mauris consectetur adipiscing elit.</p>
          
          <div class="clear"></div>
     </div>
</div>
<!-- Fin Usuario en Listado --> 

Esa es la estructura básica del html, y a grandes rasgos el css tiene flotando a la izquierda el div img, y el resto está en su forma nativa, pero el parrafo se me posiciona al costado del div con class estrellas :(

Subi lo que llevo de la maqueta al siguiente enlace http://lab.androll.cl/red

Saludos

[pzin]

Estoy a ver si carga la URL, no me termina de carga los .css

Edito: con razón, está intentando cargar http://192.168.0.108/redcoach/themes/redcoach/css/style.css

[chichote]

Iniciado por Bonez

Estoy a ver si carga la URL, no me termina de carga los .css

Edito: con razón, está intentando cargar http://www.forosdelweb.com/f53/probl...t-1038744/....

Jjajaja, cagaso, ya lo arregle, detalles XD, ando pensando en mil cosas jeje.

saludos.

[pzin]

Iniciado por chichote

Jjajaja, cagaso, ya lo arregle, detalles XD, ando pensando en mil cosas jeje.

La forma más limpia y que no te de luego problemas con el RWD que encontré es alterando los .estrellas ul li, y en vez de flotarlos ponerlos como bloques en linea.

Código CSS:

.estrellas ul li {
  display: inline-block;
}
 

Edito: Aplica también un margin-right: -3px porque al ponerlos como bloque en línea y tener saltos de línea en el HTML crea un espacio en blanco. Esto es normal y siempre ocurre. Creo que -3px se quita visualmente ese espacio.

[C2am]

Hola
El "problema" es que tienes los "li" que contienen a las estrellas flotados.
Simplemente aplica alguna de las soluciones para "limpiar floats", por ejemplo al "ul" de esa lista agregarle overflow:hidden.

Saludos

EDITO: , jajaja, tarde pero seguro

[pzin]

No le hagas caso al tipo llamado Bonez.

Mejor la solución de C2am.

No sé si valdrá como excusa que casi nunca le meto mano a los ul. Manías.

[chichote]

Grande muchachos xD, todo bien, gracias, solucionado.

[chichote]

Iniciado por Bonez

No le hagas caso al tipo llamado Bonez.

Mejor la solución de C2am.

No sé si valdrá como excusa que casi nunca le meto mano a los ul. Manías.

jajajaja no te preocupes, no te hice caso jaja, saludos.