[SOLUCIONADO] Quitar espacio reservado dejado por posicionamiento relative

[manuelgk1]

Hola buenas tardes:

Soy nuevo en CSS y he estado realizando pruebas con las posiciones. Tengo que acomodar dos div (#texto y #texto2), uno junto a otro, mi código es el siguiente:

Código:

#content{
	border-width:thin;
	border-color:#000;
	border-style:solid;
	width:900px;
	height:auto;
	margin: 0 auto;
}

#texto{
	border-width:thin;
	border-color:#0F0;
	border-style:dashed;
	width:300px;
	height:auto;
	margin:0 30px;
}

#texto2{
	border-width:thin;
	border-color:#0F0;
	border-style:dashed;
	width:300px;
	height:auto;
	position:relative;
	top:-700px;
	left: 300px;	
}

El problema es que, al ubicar el #texto2 (en la parte superior) me deja un espacio al final de mi contenedor (#content). He leído que es parte de la propiedad "relative". He intentado cambiar a absolute, el problema es que al momento de ver el sitio en otra resolución, las posiciones absolutas no se ubican en un lugar proporcional. ¿Hay forma de quitar el espacio que se reserva para un div al final de un documento utilizando posicionamiento relativo? ¿podrían sugerirme alguna solución?

De antemano gracias

Saludos cordiales

[Rafael]

Posición relativa te va a dejar un enooooorme agujero del tamaño del bloque.

No uses posiciones absolutas, casi absolutamente para nada.

Prueba ponerle a uno float: left y a otro float: right Quizá poniendole a los dos display: inline-block Prueba ambas opciones.

[manuelgk1]

Gracias por tu respuesta. En efecto, estoy usando float y funciona. Estoy ubicando ambos textos libremente (combinado con float) con margin-left y margin-top y veo que puedo moverlos en donde yo deseé.
Corrígeme si estoy mal pero observo que al usar float, los elementos salen del flujo normal del HTML tal y como si se usara un absolute.

Un saludo!

[pzin]

Iniciado por manuelgk1

Corrígeme si estoy mal pero observo que al usar float, los elementos salen del flujo normal del HTML tal y como si se usara un absolute.

Muchos te dirán que si. Pero en mi opinión no llega a salir del flujo natural. Porque siguen interactuando con el resto de elementos. Cosa que no ocurre cuando los elementos salen del flujo natural de verdad.

Realmente lo único que ocurre es que el contenedor no crece si todos sus hijos están flotados. Para solucionar esto hay varias cosas que puedes hacer.

[Rafael]

En mi opinión tampoco.

El flujo "natural" es simplemente "HEY TU vas allá abajo" todos formaditos uno detrás de otro.

Un float en realidad es flujo natural. Una foto flotada para que el texto al rededor fluya...

[manuelgk1]

pzin, he leídolos comentarios de la referencia que me escribiste en tu respuesta, he usado el overflow: hidden y me ha servido bastante! Mil gracias!, probaré las funcionalidades del clearfix posteriormente. Respecto a los float, he observado lo que me comentas, no crece el contenedor.

Rafael, en efecto también me he dado cuenta de ello, digamos que físicamente parecería que estuvieran fuera del contenedor pero en realidad es como decir que "papá contenedor le da permiso a sus hijos de que floten por ahí" gracias nuevamente por la repuesta oportuna.

Ambos gracias por su ayuda!

En sí el código quedó de la siguiente manera:

Código:

#content{
	border-width:thin;
	border-color:#000;
	border-style:solid;
	width:900px;
	height:auto;
	margin: 0 auto;
        overflow:hidden;
}

#texto{
	border-width:thin;
	border-color:#0F0;
	border-style:dashed;
	width:300px;
	height:auto;
        float:left;
	margin:0px 30px;
}

#texto2{
	border-width:thin;
	border-color:#0F0;
	border-style:dashed;
	width:300px;
	height:auto;
	float: right;
        margin:20px 50px;
}

Saludos cordiales!

[pzin]

Adicionalmente, por defecto todos los elementos tiene por defecto el valor auto para la altura. Por lo que indicarlo explícitamente no sirve de mucho —a menos que quieras sobreescribir otras reglas anteriores, que creo que no es el caso.

[manuelgk1]

Perdón por la tardanza en responder. pzin, en efecto me dí cuenta que no era necesario ponerle auto a height. Gracias en verdad por sus comentarios, me han sido de gran ayuda!

Saludos!