[SOLUCIONADO] Divs para resultados Mysql

[xarmagedonx]

Hola FDW, quería lograr mostrar las búsquedas así como hace Google, que centra los resultados y a la izquierda las herramientas de búsqueda, como si fueran 2 columnas.

Actualmente lo hago así:

Código HTML:

echo "<div id=\"Estructura\">";
   echo "<div id=\"Anuncios\">";
   echo "<p>Hola, este es un ejemplo de un anuncio, que también puede ser una imagen</p>";
   echo "</div>";
   echo "<div id=\"Resultados\">";
  while($row = $sqlBuscar->fetch_array(MYSQLI_BOTH)){
            echo "<strong><a href=$row[weburl]>$row[webTitulo]</a></strong>"; 
            echo "<p>$row[weburl]</p>";
            echo "<p>".substr(strip_tags($row['webDescripcion']), 0, 255)."...</p>"; 
        }   
   echo "</div>";
   echo "</div>";;
 

Y este es el código CSS:

Código CSS:

#Resultados {
   margin:0 auto;
   width: 650px;
}
#Anuncios {
   float: left;
   width: 150px;
}
#Estructura{
   overflow: hidden;
   width: auto;
}
 

Solo logro centrar los resultados, pero los anuncios no pueden mostrarse bien, cuando intento mostrarlos a la izquierda se superponen con los resultados y no se entiende nada.

¿como puedo lograr que los resultados se vean en el centro, y que a la izquierda aparezca el anuncio?

Algo así como hace Google, que muestra los resultados en el centro, y en la columna izquierda se ven las herramientas de búsqueda algunas veces.

Saludos y gracias!

[omarinfinito]

Prueba creando una tabla, y eliminando en codigo CSS.

[pzin]

Bueno, el comentario de omarinfinito vamos hacer como que no existe...

En realidad sólo tienes que flotar los elementos que quieras tener uno al lado del otro. Como haz hecho el truquito del overflow, entonces lo suyo sería reordenar el HTML y poner los anuncios después de los resultados y deberían de salir como esperas.

[xarmagedonx]

jaja Hola Pzin gracias por la respuesta, coloque el div "Anuncios" luego de los resultados, pero no aparece a la izquierda exactamente.

A la hora de mostrar el anuncio este aparece luego de los resultados, como abajo a la izquierda, por lo que uno tendria que llegar al final de los resultados para poder verlo.

Saludos!!!

[pzin]

Creo que no te había entendido, o entendí lo que no era.

A ver si esto es lo que buscabas:

Código CSS:

#Resultados {
  overflow: hidden;
}
 
#Anuncios {
  float: left;
  width: 150px;
}
#Estructura{
  overflow: hidden;
}
 

En #Estructura no hay que indicar width: auto, ya que los elementos de bloque tienen todos un ancho automático por defecto. Y lo del margen automática para #Resultados tampoco hace falta ya que no buscas centrarlo.

[xarmagedonx]

Hola, gracias por responder, de momento edite el codigo desde el celular y funciona perfectamente con un texto, gracias!!!

Me queda una duda, si en vez de texto coloco una imagen que supere los 150px ¿que sucedería?

Muchas gracias por la ayuda

[pzin]

Iniciado por xarmagedonx

Me queda una duda, si en vez de texto coloco una imagen que supere los 150px ¿que sucedería?

Supongo que empujaría los primeros resultados hacia la derecha. De todas formas puedes especificar un tamaño máximo para las imagenes que estén dentro de #Anuncios:

Código CSS:

#Anuncios img {
  max-width: 150px;
}
 

O aún mejor, por si algún día cambias el tamaño de #Anuncios:

Código CSS:

#Anuncios img {
  max-width: 100%;
}
 

Así no tendrías que ir mirando las medidas.

La altura se adaptaría en ambos casos, es decir, no hay riesgo de que se deforme la imagen.