Archive for the 'css' Category

04DicRestyling para Via Valentina

vivalentina

Via valentina es la clase de proyecto integral que pone en juego gran parte de las capacidades de nuestro estudio. Venagraphica ha acompañado a esta marca desde su nacimiento, creando la imagen corporativa y asesorando en los diferentes aplicativos, hasta la elaboración de sus estrategias comerciales y la puesta en marcha de su puerta digital.

Para este proyecto generamos toda una gama de recursos técnicos algunos de ellos exclusivos para Via Valentina como lo son la galería de imágenes gestionada por un panel que trabaja sobre un sistema de datos XML (lo que la hace fácilmente actualizable) , la carga de contenidos con una barra vertical que hace que la velocidad de la página sea óptima y siempre y como hemos tratado de defender en todos nuestros proyectos enmarcado en un diseño cuidado y una usabilidad responsable.

A fin de mantenerla viva ha llegado también el momento de adaptarla a cada temporada y desde su nacimento no hemos dejado de hacerla mostrar el movimiento y cambio permanente de una empresa que se adapta constantemente y que cada temporada tiene nuevos contenidos que mostrar.

Al margen de poder ver la web aquí tenéis una muestra del cambio sufrido desde su creación y como hemos ido adaptando el color y la estética haciendo que esta herramienta de comunicación no caduque cada temporada. La web es a fin de cuentas un escapárate como lo son las tiendas de moda ¿alguna tienda deja su escaparate igual durante años?

 

viavalentina

viavalentina

 

viavalentina

viavalentina

viavalentina web

viavalentina

 

viavalentina

16JulMenu al estilo de la página de MAC

Bien, lo cierto es que un día se me ocurrió ver cómo estaba hecho el menú de la página de mac, no usaba texto sino que los rótulos estaban hechos con imagen, y sin embargo se cargaba siempre de forma homogénea sin dar fogonazo blanco al susitituir la imagen en los efectos de rollover. Si bien es de lo más sencillo hacer un menu de este aspecto con css (puedes usar por ejemplo una imagen con los tres estados para cada botón)  me intrigaba ver como lo habían resuelto técnicamente. Para mi sorpresa lo habían hecho con una única imagen. No era muy difícil imaginar que se trataba de un ejercicio de uso de la propiedad background-position, variando en cada boton la colocación de una única imagen de fondo que contiene todos los estados del menú, es decir de todos los botones.

Os dejo aquí un ejemplo de cómo lo he implementado. Sencillo, fácil y que permite un gran control sobre el aspecto del mismo. Y podéis descargarlo en un rar aquí.

15JulManifiesto incompleto para el crecimiento creativo.

Interpretación libre de un texto de Bruce Mau. (Este documento cayo en nuestras manos hace más de cuatro años, uno hace balance y parece que sin quererlo hemos pasado por muchos de los estados que nos retrata Bruce Mau, y la verdad, creo que hemos sido afortunados por todo este proceso vivido)

1. Permite que los acontecimientos te cambien.Tienes que estar deseando crecer. El crecimiento no es algo que te ocurre. Tú lo produces. Tú lo vives. Los requisitos del crecimiento son: que estés abierto a experimentar nuevos acontecimientos y dispuesto a ser cambiado por ellos.

2. Olvídate de lo bueno. Lo bueno es una medida conocida; es aquello en lo que todos estamos de acuerdo. Crecer no es algo necesariamente bueno. El crecimiento es una exploración intermitente que no necesariamente nos llevará a lo que estamos buscando. Mientras te apegues a lo bueno, nunca alcanzarás el verdadero crecimiento.

3. El proceso es más importante que el resultado. Cuando el resultado conduce al proceso, sólo llegaremos a donde ya hemos estado. Si el proceso conduce al resultado, quizás no sabremos a dónde vamos, pero sabremos que queremos estar ahí.

4. Ama tus experimentos (como amarías a un hijo feo). La emoción es el motor del crecimiento. Goza la libertad de considerar tu trabajo como maravillosos experimentos, intentos, ensayos y errores. Adopta un enfoque de largo plazo y permítete todos los días la diversión de fracasar.

5. Profundiza. Entre mayor profundidad alcances, más probable será que encuentres algo valioso.

6. Captura los accidentes. La respuesta incorrecta es la respuesta acertada en busca de una pregunta diferente. Acumula respuestas equivocadas como parte del proceso. Plantéate diferentes preguntas.

7. Estudia. Un estudio es un lugar para estudiar. Utiliza la necesidad de producir como una excusa para estudiar. Todos se beneficiarán.

8. Divaga. Permítete divagar sin propósito. Explora lo colindante. Evita los juicios. Deja la crítica para después.

9. Comienza donde sea. John Cage nos dice que el no saber dónde comenzar es una forma común de parálisis. Su consejo: comienza donde sea.

10. Todos somos líderes. El crecimiento ocurre. En el momento en que se dé, déjalo surgir. Aprende a seguir a otros cuando tenga sentido. Permite que cualquiera dirija.

11. Cosecha ideas. Limita las aplicaciones. Las ideas necesitan de una dinámica, de un flujo, de un ambiente generoso para sobrevivir.

12. No dejes de moverte. El mercado y su dinámica tienen la tendencia a reforzar el éxito. Resístelo. Permite que el fracaso y la capacidad de cambio sean parte de tu práctica.

13. Desacelérate. Apártate de la sincronía de los marcos de tiempo establecidos y te sorprenderán las oportunidades que se presentarán.

14. No seas "cool". "Cool" es el temor conservador vestido de negro. Libérate de los límites de esta naturaleza.

15. Haz preguntas tontas. El crecimiento se alimenta del deseo y de la inocencia. Valora la respuesta, no la pregunta. Imagínate aprendiendo a lo largo de tu vida al ritmo de un niño.

16. Colabora. El ambiente que prevalece entre la gente que trabaja en equipo está lleno de conflictos, fricciones, discordias, gozos y un vasto potencial creativo.

17. _____________. Intencionalmente conservado en blanco. Deja espacio para las ideas que aún no has tenido y para las ideas de otros.

18. Desvélate. Cosas extrañas ocurren cuando has ido muy lejos, cuando llevas mucho tiempo despierto, has trabajado demasiado y estás aislado del resto del mundo.

19. Trabaja la metáfora. Cada objeto tiene la capacidad de representar algo distinto de lo que aparentemente es. Trabaja en lo que representa.

20. Asegúrate de correr riesgos. El tiempo es algo genético. El hoy es hijo del ayer y padre del mañana. El trabajo que haces hoy creará tu futuro.

21. Repítete. Si te gusta, hazlo otra vez. Si no te gusta, hazlo otra vez.

22. Inventa tus propias herramientas. Haz híbridos con tus propias herramientas para construir cosas únicas. Aun las herramientas más sencillas pueden construir avenidas completamente nuevas para la exploración. Recuerda que las herramientas amplifican nuestras capacidades, y que la más pequeña de éstas puede hacer una gran diferencia.

23. Súbete a los hombros de los demás. Puedes viajar más lejos montado en los logros de quienes te han precedido. Y desde ahí, la vista es mucho mejor.

24. Evita el software. El problema con el software es que todo el mundo lo tiene.

25. No limpies tu escritorio. Podrías encontrar por la mañana algo que no pudiste ver esta noche.

26. No participes en concursos en busca de reconocimiento. Simplemente no lo hagas. No es bueno para ti.

27. Sólo lee las páginas del lado izquierdo. Marshall McLuhan lo hacía. Si disminuimos la cantidad de información, dejamos espacio para lo que puede ser nuestra "ronchita".

28. Crea nuevas palabras. Expande el léxico. Las nuevas condiciones demandan nuevas formas de expresión. La expresión genera nuevas condiciones.

29. Piensa con la mente. Olvida la tecnología. La creatividad no es un objeto-dependiente.

30. Organización = Libertad. La verdadera innovación en diseño, o en cualquier otro ámbito, ocurre en un contexto. Ese contexto es una suerte de empresa manejada como cooperativa. Frank Gehry, por ejemplo, sólo es capaz de crear Bilbao porque su estudio lo tiene contemplado en el presupuesto. El mito de una separación entre los "creativos" y los "de traje" es lo que Leonard Cohen define como un "encantador artefacto del pasado".

31. No pidas dinero prestado. Nuevamente, es un consejo de Frank Gehry. Al mantener el control financiero, mantenemos el control creativo. Esto no es exactamente ciencia espacial, pero es sorprendente lo difícil que resulta mantener esta disciplina y cuántos han fallado en ello.

32. Escucha con atención. Todo colaborador que entra en nuestra órbita trae consigo un mundo más extraño y complejo de lo que jamás hubiéramos imaginado. Al escuchar el detalle y la sutileza de sus necesidades, deseos o ambiciones, hacemos coincidir su mundo con el nuestro y ninguna de las partes volverá a ser la misma.

33. Haz visitas de campo. La amplitud del mundo es mucho más grande que la de tu televisor o Internet; más profunda, interactiva, rentable y dinámica que cualquier ambiente simulado en computadora en tiempo real.

34. Comete errores más rápido. Esta no es mi idea; la pedí prestada. Creo que pertenece a Andy Grove.

35. Imita. No seas tímido al respecto. Intenta llegar tan cerca como puedas. Nunca recorrerás todo el camino, y la separación puede resultar realmente sorprendente. Sólo necesitamos observar a Richard Hamilton con su versión del gran vaso de Duchamp para ver lo rica, desacreditada y desaprovechada que es la imitación como técnica.

36. Improvisa. Cuando se te olviden las palabras, haz lo que Ella Fitzgerald: inventa algo más … pero no palabras.

37. Rómpelo, estíralo, flexiónalo, estréllalo, quiébralo, dóblalo.

38. Explora la otra orilla. Existe una gran libertad cuando evitamos adoptar el paquete tecnológico. No podemos encontrar la otra orilla porque estamos parados sobre ella. Intenta utilizar equipo con tecnología que se ha tornado obsoleta por un ciclo económico, pero que aún posee un rico potencial.

39. Los descansos para tomar café, los viajes en taxi, son invernaderos. El verdadero crecimiento con frecuencia ocurre fuera de los espacios en los que intentamos que se dé; en espacios poco ortodoxos — lo que el Dr. Seuss llama "el lugar de espera". Hans Ulrich Obrist una vez organizó una conferencia sobre ciencia y arte con toda la infraestructura de una conferencia — recepción, pláticas, comidas, llegadas al aeropuerto — lo único que no hubo fue conferencia. Aparentemente el experimento fue altamente exitoso y gestó un ambiente de colaboración que aún persiste.

40. Evita marcar áreas. Sáltate las trancas. Las fronteras de la disciplina y los ambientes regulatorios son intentos de controlar la tormentosa vida creativa. Comúnmente son esfuerzos entendibles para ordenar los procesos evolutivos complejos. Nuestro trabajo es saltar trancas y atravesar campos.

41. Ríete. La gente que visita nuestro estudio con frecuencia comenta sobre cuánto nos reímos. Desde que soy consciente de ello, lo utilizo para medir qué tan cómodamente nos estamos expresando.

42. Recuerda. El crecimiento sólo es posible como producto de la historia. Sin memoria, la innovación se convierte en mera novedad. La historia da rumbo al crecimiento. Pero la historia nunca es perfecta. Cada recuerdo es una imagen degradada o recompuesta de un momento o acontecimiento previo. Esto es lo que nos hace conscientes de que se trata del pasado, y no del presente. Ello significa que cada recuerdo es nuevo, que se trata de algo diferente de su fuente y con un gran potencial de crecimiento propio.

43. Dale el poder a la gente. El juego sólo puede ocurrir cuando la gente siente que tiene el control sobre su vida. No podemos ser agentes libres si no somos gente libre…

 

15JunUT LOOP!

Aquí teneis una buena campaña de ropa de la marca UT, la web, www.uniqlo.com/utloop/ aunque es de la temporada pasada, la verdad que es muy entretenido hacer tu propio loop musical, si teneis un par de minutos entrad.

 

 

 

 

06AbrCrear menús desplegables con CSS

css_menus

Los menús desplegables son un recurso habitual en la web. Permiten disponer la información en varios niveles que no sean siempre visibles y eso facilita tremendamente la arquitectura de la información en la web. Por espacio, por claridad, por dosificación de la información… Los encontramos en muchísimas páginas pero generarlos no es tan sencillo como pueda parecer. Hoy voy a dejar dos recursos y una solución a un problema concreto. Los recursos son dos ejemplos de Menús desplegables para poder insertar en cualquier página. La solución se refiere a un problema concreto. ¿Cómo hacemos que una "div" de uno de estos menús se sitúe sobre un objeto flash? O dicho de otra forma ¿Qué pasa cuando el menú desplegable se ha de situar sobre un SWF?

Antes de la explicación he de decir que los menús desplegables tradicionalmente se hacían mediante Javascript. Esto tiene varios problemas. El primero es que dependes de que el navegador del usuario tenga habilitado el Javascript. Si no lo tiene no ve los menús. El segundo es que si tienes a solventar los problemas empleando Javascript puedes acabar sobrecargando la web. Entre las ventajas estaría la dinamicidad de los menús y las posibilidades, mucho mayores empleando Javascript. Yo me decanto en este post por presentaros los menús hechos mediante CSS.

Bien, el recurso que os propongo es una web de las que podéis descargar menús que podréis utilizar sin problemas.

CSS Menus es una web con diferentes menús desplegables. Son gratuitos aunque el autor ha habilitado un espacio para donar dinero al proyecto.
http://www.cssmenus.co.uk/

04EneEl ingenio tras el objetivo

Vuelve a mirar la foto. ¿Estás seguro de que es agua lo que hay en el vaso?

Me sigo considerando fotógrafo. La construcción de la mayoría de mis objetos está resuelta de mala manera… Bueno, me explico, quiero decir que están construidos para ser fotografiados. No tienen empaque, ni una presencia cuando los ves físicamente. No hay un acabado maravilloso, solo un aspecto de ellos que vas a fotografiar es lo que funciona. Sacados de ese contexto funcionan en contadas ocasiones. Alguna vez también me ha ocurrido lo contrario: un objeto que es muy atractivo y que no funciona al ser fotografiado. Sin embargo, lo normal es justo el caso contrario.

 

Chema Madoz es un fotógrafo español. Su obra me la dio a conocer Álex a través de sus paredes, como casi tantas otras cosas del diseño y el arte. Y digo a través de sus paredes, porque en de su casa cuelgan fotografías de este ingenioso fotógrafo que ha alcanzando unas cotas de popularidad impensables para otros artistas contemporáneos. Fresco, genial, ingenioso y de ideas sencillas pero brillantes, resuelve en una instántanea una idea que obliga al espectador, a accionar unas décimas de segundo, el mecanismo necesario para descubrir ese "algo más" que tiene su imagen. Es ese "algo más" que  tiene toda su obra lo que nos hace admirar tan brillante trabajo. www.chemamadoz.com/

03DicCódigos diferentes para navegadores diferentes (II)

Ya expliqué como hacerlo en Javascript. Vamos a ver como vincular una hoja de estilos diferente según el navegador que tengamos.

  1.  
  2. if (stripos($_SERVER[HTTP_USER_AGENT],"MSIE"))
  3.                 echo "<link href="\"estilos/estiloMetro.css\"" type="\"text/css\"" rel="\"stylesheet\"" />\n";
  4.         else
  5.                 echo "<link href="\"estilos/estiloMetro.css\"" type="\"text/css\"" rel="\"stylesheet\"" />\n";
  6.         echo "
  7.  

17SepMargen Doble en Internet Explorer

Para programadores: En un diseño con dos flotantes posicionados a izquierda y derecha formando dos columnas me encuentro con que Explorer 6.0 genera un margen izquierdo del doble tamaño que Firefox y Explorer 7.0. La explicación se debe a este “postulado”:

"En Explorer 6.0 cuando un margen se aplica a una caja flotante en la misma dirección que el flotante ese margen se duplica en tamaño."

Vamos a dar dos soluciones al problema: una solución viene a modo de hack. Un hack para una hoja de estilo en cascada o css, es una norma que altera el comportamiento de un navegador sin afectar a otros. Generalmente fruto de un comportamiento deficiente que se sale del estándar. Lo que va a hacer nuestro hack es que en explorer 6.0 el flotante en cuestión funcione de forma diferente comportándose como un elemento en línea. Mediante esta regla definimos un comportamiento que sólo explorer 6 reconoce:

  1.  
  2. *html .column{
  3.         .display: inline;
  4. }
  5.  

La otra solución es aplicarle un padding al elemento contenedor para ahorrarse problemas con ese margen. Más sencillo aún que tener que añadir el hack.

Se trata de un error que podéis encontrar documentado en esta página, y que yo resumo mediante esta imagen para que se entienda con claridad:

dobleMargen IE explorer

 

17MarDiseño flotante de 2 columnas en explorer 7

El otro día me enfrenté a un diseño en photoshop que debía convertir a css. El diseño tenía el siguiente aspecto.

En el se puede apreciar un degradado de fondo fácil de implementar con una fina tira repetida en el eje x. El diseño tiene dos columnas que se deben poder llenar de contenido y alargarse verticalmente prolongando el fondo que tienen debajo. Hasta ahí todo perfecto. Genero un esquema como este:

 

 <div id=”cuerpo”>
<div id=”izquierda”></div>
<div id=”derecha”></div>
<div id=”pie”></div>
</div>
 

Con esta hoja de estilo:

  1.  
  2.  
  3. #cuerpo {
  4.         background-image: url(../imagenes/fondoCuerpo.jpg);
  5.         background-repeat:  repeat-y;
  6.         width: 938px;
  7.         margin-right: auto;
  8.         margin-left: auto;
  9.  
  10. }
  11. #derecha {
  12.         width: 754px;
  13.         float: right;   
  14. }
  15. body {
  16.         background-image: url(../imagenes/fondo.jpg);
  17.         background-color: #333333;
  18.         background-repeat:   repeat-x;
  19. }
  20. #izquierda {
  21.         float: left;
  22.         width: 100px;
  23.         padding-left: 47px;
  24. }
  25. #pie {
  26.         background-image: url(../imagenes/pie.jpg);
  27.         background-repeat: no-repeat;
  28.         height: 34px;
  29.         width: 938px;
  30.         margin-top: 0px;
  31.         margin-right: auto;
  32.         margin-bottom: 0px;
  33.         margin-left: auto;
  34.         clear: both;
  35. }
  36.  

El problema es una imagen que proyecta una sombra sobre el fondo. No puedo simular la sombra con un png transparente porque Explorer 6.0 no acepta los pngs con transparencias. Tampoco puedo usar un gif porque no tiene la suficiente calidad. Finalmente opto por situar un elemento sin contenido exclusivamente para que contenga el fondo. Recorto la imagen de forma que los bordes queden bien situados con respecto al degradado y coloco una div del tamaño de la imagen generada de forma que el nuevo esquema tiene el siguiente aspecto:

 

<div id=”cuerpo”> 

<div id=”fondo Superior”>

<div id=”izquierda”></div>

<div id=”derecha”></div>

            </div><div id=”pie”></div></div>

Y el código CSS del nuevo elemento:

 

  1.  
  2. #fondoSuperior {
  3. background-image: url(../imagenes/cuerpoNuevo.jpg);
  4. height: 744px;
  5. background-repeat: no-repeat;
  6. background-position: center top;
  7. }
  8.  

Se visualiza perfectamente en Firefox y en Explorer 6.0, pero al visualizarlo en Explorer 7.0 cuando los divs “izquierda” o “derecha” se llenan de contenido el fondo del div “cuerpo” no se prolonga hacia abajo es más, pasa por debajo del div “pie”. Como se puede ver aquí, en un boceto del montaje:

 

Después de mucho comerme la cabeza, la solución la encuentro flotando el elemento:

  1.  
  2.  
  3. #fondoSuperior {
  4.         background-image: url(../imagenes/cuerpoNuevo.jpg);
  5.         background-repeat: no-repeat;
  6. height: 744px;
  7. float: left;
  8. }
  9.  

Lo que soluciona el problema. No me había encontrado aún con diseños que se visualizaran correctamente en Firefox y Explorer 6.0 pero no en Explorer 7.0.

11MarCombinar márgenes

Podríamos resumir la idea de combinación de márgenes de la siguiente forma:

“En caso de que dos o más vértices verticales se encuentren la altura del margen será igual a la altura del mayor de los márgenes combinados”.

Sobre esta idea, los márgenes son un detalle del diseño que nos pueden volver locos si no tenemos en cuenta esta premisa. Veamos algunos ejemplos.

 bordes css

Por ejemplo aquí, tenemos dos elementos situados uno encima del otro. Podemos observar como se combinan sus márgenes. De modo que en la parte de “antes” tenemos como se dispondría el diseño de no combinarse los márgenes, y en la sección “después” podemos ver cuál es la disposición real de los márgenes.

Y otro caso aún más habitual, el caso en el que un elemento se encuentra dentro de otro.

bordes css

Si no hay relleno o borde que separe los márgenes, éstos se combinarán. Es decir uno de los márgenes (el mayor) permanecerá, mientras que el otro desaparecerá.

También puede combinarse los márgenes superior e inferior de un elemento vacío. Si no hay bordes ni rellenos ni contenido el margen inferior toca el superior y se combinan.

11MarEl modelo de caja estándar y el modelo de caja en Internet Explorer

El modelo de caja estándar y el modelo de caja IE

Existen diferencias entre el modelo de caja estándar y el modelo de caja de Internet Explorer.

Conviene conocerlas porque son fuente de muchos quebraderos y de problemas importantes en los diseños: Vamos a verlo con un ejemplo, la explicación está inspirada en un libro de la editorial Anaya Multimedia. El libro se llama CSS y los autores son Andy Budd, Cameron Bull y Simon Collison. Voy a utilizar ese mismo ejemplo para explicarlo, pero os recomiendo que si queréis aprender css entendiendo los conceptos desde el principio lo busquéis. Bien, partamos del siguiente código:

  1.  
  2. #divCaja{
  3.         margin:10px;
  4.         padding: 5px;
  5.         width: 70px;
  6.     }
  7.  

Si implementamos este código CSS y visualizamos el resultado con un Navegador que use el modelo de caja estándar, el resultado será el siguiente:

 

El parámetro width que hemos definido lo respeta, y afecta al área de contenido. A este valor se le suman los bordes y márgenes y da lugar a un ancho total de 100px; Pero veamos lo que ocurre con el modelo de caja de Internet Explorer: Explorer nos daría el siguiente resultado para el mismo código:

La diferencia la encontramos en el ancho total (pasa a ser 90 px) y en el ancho del área de contenido (pasa a ser de 60px). A diferencia del modelo anterior aquí no respeta el valor del parámetro width. ¿Porqué? Porque considera los 5px de relleno de cada lado como parte del ancho de 70 píxels del área de contenido. Aunque existen diferentes soluciones, para evitar las diferencias de visualización, yo recomendaría (y así lo expone el libro) no añadir nunca relleno a un elemento con un ancho definido. En su lugar hay que añadir relleno o márgenes al padre o al hijo del elemento.

11MarEliminar los rellenos y márgenes de todos los elementos del documento

 

De partida puede ser bueno eliminar todos los márgenes y rellenos de un documento. La mejor forma de hacerlo es emplear una regla genérica que conocemos como selector universal y que da un giro al planteamiento general. De esta forma sólo pondremos margen y relleno a los elementos que queramos que lo tengan. Personalmente creo que es la mejor forma de trabajar, porque te da más control sobre los elementos al no tener que estar pendiente de los margenes y rellenos predefinidos para los objetos.

  1.  
  2. *{
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6.  
  7.  

05MarFlotantes en CSS

En un diseño a dos columnas, donde las columnas son dos elementos flotados a izquierda y derecha a menudo nos encontramos con que al crecer las columnas porque se les introduce contenido, el contenedor no engloba a los elementos que tiene en su interior.

Si nuestro contenedor tiene por ejemplo un fondo resulta que al alargar las columnas, no se ve dicho fondo. Esto ocurre en Firefox pero no en Explorer 6. Y ocurre porque por definición un objeto flotante “se saca del flujo del documento”, es decir, no ocupan espacio y por tanto no se pueden encontrar dentro de elementos contenedores. Con una excepción que los contenedores sean a su vez elementos flotantes, pero esto nos origina a su vez restricciones importantes, y nos obliga a flotar todo el diseño (que no tiene porque ser lo que queremos).

La solución que he encontrado a este problema la he sacado del libro “CSS”, un manual Anaya multimedia que es una de las mejores formas de comprender paso a paso la metodología de la programación CSS que responde a una lógica que hay que entender si no quieres que los diseños hagan lo que ellos quieran y no lo que tú quieras que hagan. La solución en cuestión es añadir un div vacío, que no flota y que hace que el contenedor pase a englobar los dos elementos flotantes. La forma de hacer que este elemento vacío actúe de este modo, y deje un espacio, es aplicarle la propiedad “clear: both”. No tiene porque ser un elemento vacío si disponemos de un elemento al final de la página que nos evite el problema.

De forma sencilla, os pongo el ejemplo del libro, para que lo veáis más claro:

  1.  
  2.     .news{
  3.         background-color:gray;
  4.         border: solid 1px black;
  5.     }
  6.     .news img{
  7.         float: left;
  8.        
  9.     }
  10.     .news p{
  11.         float: right;
  12.        
  13.     }
  14.     .clear{
  15.         clear: both;
  16.     }
  17.  

Y el código html

  1.  
  2.     <div class="news">
  3.     <img src="imagen.jpg" alt="" /><p>Un texto</p>
  4.     <div class="clear"> </div></div>
  5.  



Blogroll

Recent Listening