Ok, no hay problema, siempre que haya dudas me dicen y trataré de aclarar las cosas.
Creo que resultó confusa la diferencia entre el "ancho del contenido" y el "ancho del bloque". Más bien creo que no usé las palabras adecuadas.
Con ello quería hacer la diferencia de que: por un lado está el
"largo del contenido" que afortunadamente varía muy poco, lo más largo siempre es el título que es fijo, y además siempre tendrá el mismo número de lineas, así que el
largo de contenido es casi fijo.
Y por otro lado está el
"ancho del div" (que en estos casos, sin haber tocado aun algo en el css es del mismo largo del contenido).
------------------------------------
Ahora viene un resumen del problema, y las formas en que he buscado resolverlo.
A.- El problema está entre los bloques 2 y 3.
El
ancho de los div 2 y 3, es el mismo que el
largo de su contenido, por lo tanto "quedan pegados" y lo que busco es que (por estética) esos dos bloques no me queden "pegados", sino que queden separados de acuerdo al ancho total disponible.
Así como ocurre en las tablas, que las celdas se reparten el ancho total disponible.
B.- Para resolver esto es que he intentado un par de cosas.
1.- Hacer que el
ancho del div, no sea igual que el
largo del contenido, sino que sea mayor.
Pero si lo fijo, queda fijo. La idea es que sea "elástico". Para que sirva en casi cualquier tamaño de ventana
Como lo que importa es la separación entre 2 y 3, con que funcione para el bloque 2 sirve.
2.- No tocar los anchos, y en su lugar jugar con las separaciones. Me ha ocurrido igual, si fijo la separación con margin o padding, entonces esta separación es fija y no es elástica.
3.- También está el caso en que al bloque 2 y 3 los separé con float (2 float left y 3 float right).
El bloque 2 me queda pegado del bloque 1 (así es como debe ir por lo que es una ventaja)
El bloque 3 me queda pegado del margen derecho, y entonces caigo en lo mismo, que querría separarlo "elásticamente" y para que quede más centrado a la izquierda.
Aquí dejo una imagen que creo puede ayudar.