Limpiar floats en CSS para todos los navegadores

Pequeño truco que saqué de un libro para ajustar el css cuando tenemos elementos float sin hacer uso del clear.
Partimos de un contenedor con la propiedad border y dos elementos con propiedad float.

<div id="contenedor">
    <div id="izquierda">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.        Duis molestie turpis vitae ante.
    </div>
    <div id="derecha">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.        Nulla bibendum mi non lacus.
    </div>
</div>

 
#contenedor {
    border: thick solid #000;
}
#izquierda {
    float: left;
    width: 40%;
}
#derecha {
    float: right;
    width: 40%;
}

Observamos que la imagen inferior es lo que suele ocurrir. El navegador no puede ajustar el contenedor a los elementos una vez estos hacen uso de la propiedad float.

Podemos hacer uso de un div que contenga la propiedad  clear : bloth;

<div id=”contenedor”>

<div id=”izquierda”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>

<div id=”derecha”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>

<div style=”clear: both”></div>

</div>

 

Con lo cual obtendríamos un resultado similar al  de la imagen inferior :

Y esto nos solucionaria la papeleta, pero llega un momento que aparte de tener elementos vacíos, el usar varios floats nos puede despistar y que los elementos no se comporten como esperamos.

Hay otra solución, que aparte de ahorrarnos unas lineas, asi como elementos vacíos, funciona correctamente en cualquier navegador :

#contenedor {

border: thick solid #000;

overflow: hidden;   /*Esta linea */

height: 1%;          /* y esta linea son las importantes */

}

#izquierda {

float: left;

width: 40%;

}

#derecha {

float: right;

width: 40%;

}

Supongo que eso obliga al contenedor a ajustarse al tamaño minimo disponible, osea, se ajusta al tamaño de los elementos que contiene.

El ejemplo esta extraído, tal cual, de este libro, que además os podeis descargar.

Ale, que vaya bonito! 😉

Anuncios

Ordenar tres variables con tres If sin auxiliares

Este es un metodo realizado en java para ordenar tres variables: num1, mum2, num3  de mayor a menor, las almacenaremos como max, min, mid:

Como siempre, enlace al código en pastebin.
Observar que en ultimo paso intercambiamos el valor de dos variables sin utilizar auxiliares, curioso, nada mas.

El texto está en catalán, pero lo importante se entiende perfectamente!

J’attendrai

Tu silencio es ruido.

Invertir un string en python

Sencillo ejemplo para invertir el orden de cualquier string en python, haciendo uso de recursividad:

def reverse(list):
	if len(list)==1:
		return list
	else:
		return list[-1]+reverse(list[:-1])

Enlace a pastebin

Edit:

Como bien comentan abajo, hay una manera mucho mas simple( Gracias 😉 )

def invertir(var):
        return var[::-1]

Si quiere puede poner varón

Desorientado

 

Días en los que te sientes perdido. Buscas con urgencia retales de tu vida que te permitan un reencuentro con el flujo regular que sistemáticamente te guía. Producto de noches intensas, de largas horas de vigilia inmerso en la muchedumbre extasiada, en una algarabía que gira en torno al alcohol y otras sustancias, de mayor o menor complejidad en el diseño.

Abatido te ases a los clásicos pilares que conforman tus recuerdos, tratando de atisbar algún  sentido en pro de tus futuros actos, obviando la perversa idea de que resulta inexplicable concebir que no tan sólo no te conozcas más cada día, sino que cada día te vas conociendo menos. Te tiemblan las piernas y crees desfallecer.

Te oprimen las propias paredes de tu hogar y tambaleante vuelves al reducto bajo tus sabanas, deseando tan sólo una cosa.

Eres consciente de que posiblemente necesites unas dosis sistémicas, solamente el sistema podra ubicarte de nuevo. Podrá encender la luz de tu cerebro, para que este pueda volver a actuar bajo una fuerza insonsciente que te sumira sin remedio en el caudal que arrastra tu progreso.

El canto matutino de una nueva jornada te lanzará, como ya hizo otras veces, hacia tu mundo real. Ese que tanto odias pero que en ciertas ocasiones tan necesario se presenta.

Probablemente te definan mejor tus actos que un oscuro análisis interno que puede acabar perdiéndote por los dominios de la sinrazón. Esa que te lleva a componer amalgamas que terminan hablando de sí mismos, como este que aquí concluyo.

Primer formulario en psp

Hoy veremos un sencillo formulario bajo Python Server Pages.

<%
#Definimos una funcion para mostrar el formulario
def formulario():
%>
<p>Envianos tus datos</p>
<form method="post" action="formulario.psp">
	Nombre:<input type="text" id="nombre" name="nombre" />
	Apellidos:<input type="text" id="apellidos" name="apellidos" />
	<input type="submit" value="enviar" />
</form>
<%
#end formulario
%>
<html>
<body>
<%
#Comprobamos que nos llegan parametros de un formulario que esperamos
if form.has_key('nombre') and form.has_key('apellidos'):
	#Comprobamos que estos parametros no llegan vacios
	if req.form['nombre'] != '' and req.form['apellidos'] !='':
		nombre = req.form['nombre']
		apellidos = req.form['apellidos']
%>
<h4>Hola <%=nombre +' '+ apellidos+'!!' %><h4>
<%
	else:
		#Si los datos estan vacios mostramos el formulario
		formulario()
else:
	#Si no existen datos del formulario mostramos el formulario
	formulario()
#end if
%>
</body>
</html>

La verdad es que si anteriormente habéis trabajado con  asp como con php vereis que el ejemplo es de lo mas sencillo, tan sólo debemos reparar en las funciones:

form.has_key('---')

y

req.form('---')

las cuales, por el contexto, se sobreentienden. 😀

Os dejo el enlace a pastebin.com, con este mismo codigo algo mas amigable!