AYUDA CSS

[Paul_Kraft]

este el html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="main.css" />

</head>
<body>
		<div id="wrapper">
			<div id="header">
				test	
			</div>
			<div id="events">
					asddd
			</div>
			<div id="menu_h">
				<ul>
					<li><a href="eventos.html">Eventos/Agenda</a></li>
					<li><a href="talleres.html">Talleres</a></li>
					<li><a href="eventos.html">Eventos/Agenda</a></li>
					<li><a href="talleres.html">Talleres</a></li>
				</ul>
			</div>
			<div id="principal">
			Hola :)
			</div>
		</div>
		
</body>
</html>

este es el css

/* Limpiar CSS Nativo */
* {
	padding: 0;
	margin: 0;
}
/* Layout */
html,body {
	background-image: url('images/bg.png');
	background-repeat: repeat-x repeat-y;
	height:100%;
}
	
#wrapper {
	margin: 0 auto;
	width: 922px;
	height: 100%;
}
#header {
	width: 450px;
	float: left;
	background:#7d9166;
	height: 100px;
}
#events {
	float: right;
	margin-right: 22px;
	width: 450px;
	height:100%;
	background: #e7cfa9;
}

#menu_h {
	float: left;
	width: 450px;
	height:32px;
	color: #fff;
	background: #333;
}
#principal {
	float: left;
	width: 450px;
	height: 100%;
	background: #fff;
	}

no entiendo por que el div 'principal' corre el largo de la pagina.
Bah si, creo entender que se corre porque arriba tiene otros 2 divs. pero no se como hacer para que el alto sea el 100% de la pagina pero que se ajuste al largo nominal del navegador.

Si se fijan 'events' usa el mismo metodo que 'principal' para funcionar, y al no tener 2 divs arriba de el, funciona justo como quiero.

alguien que me pueda ayudar a ajustar el 'principal' al largo que tiene events. gracias.

[Paul_Kraft]

control veni a bumpearme el thread

[Lux]

Es un error re newbie. Suscribo porque siempre que me topo con este problema lo resuelvo de distintas formas, generalmente hackeando.

Ojala caiga algun capo CSS a explicar algo tan basico pero ENFURIATING como esta verga.


El tema es este. El alto se corre (te muestra un poco de scroll al pedo) porque tenes un par de divs previos con altos fijos, en pixeles.
Y al contenedor "principal" le decis 100%. Ese % no es el alto disponible, sino que depende del contenedor padre. En este caso, el "wrapper", que es 100%. O sea que toma ese 100% de otro contenedor padre, en este caso, el body.

Si tenes 2 divs arriba del principal q suman 300 pixels de alto, el div principal con alto 100% va a tomar el 100% del alto del body (gralmente el alto de la pantalla del browser). Si la pantalla del browser tiene alto 750, entonces el alto total de la página (el contenedor html? no sé) va a ser 750(100% del alto de pantalla))+300 px.




bla bla

[Mirabilis]

Siempre puteo con css y mando todo a la mierda y lo arreglo de la forma mas facil. Al pelotudo que ve la pagina le chupa un huevo el codigo con el que hayas armado todo.

Suscribo para ver como se resuelve. Yo lo arreglaria haciendo algo asi.

http://pastebin.com/LbdWkxZ4

Meto el header y el menu adentro de la columna izquierda.

El css es lo mismo pero sin float en header ni menu.

Besos

[MoaLaiSkirulais]

0800 bones

[Nagual Bones]

jajuju


segun entendi tenes un header y un events ambos horizontales uno a la izq del otro

y abajo queres poner el menu y el principal uno al lado del otro no?

al menu deberias ponerle "clear: both" para cortar la linea de floats y comenzar de nuevo, tambien podrias meter header y eventes en un verdadero "header wrapper" que contenga a ambos y al menu y principal dentro de otro contenedor

tambien veo que estas con los anchos y margenes muy al palo respecto al wrapper, o sea son exactos "ancho 922, 450 450 22" y a veces pasa que hay un pixel loco dando vueltas que molesta y empuja al float abajo, sobre todo en IE"

lo ideal es que no este todo tan tan ajustado, sino que haya cierto "colchon" de pixeles para evitar estas aberraciones browsisticas.

ponele como poner header o events en 448, o achicar el margen.

cuando flotas uno left y otro right y el ancho de ambos es menor al de su contenedor automaticamente generan un "margen" muerto en el medio de ambos y eso tambien lo podes utilizar, aunque ahi veo que estas corriendo events mas para el centro.


me enfocaria en jugar con el "clear: both" y encerrando ambos pares de divs en sub contenedores.

[Mirabilis]

Yo pense que queria que la columna izquierda no se pase de largo.

[Paul_Kraft]

mirabilis soluciono el problema

pronto vendre con mas desafios, salutti!

[Paul_Kraft]

CONTINUAMOS CON EL PROBLEMA!

okey, ya estuve varias horas tocando el codigo... meti un script para manejar noticias bien cabezoide y ahora que subi el primer articulo veo que si un poquito se estira, ya se descajeta todo.

observen ustedes mismos:

https://www.polkraft.com.ar/SitioAsamblea/

[MoaLaiSkirulais]

che para esa mierda usá WP Joomla o algo

[Nagual Bones]

Mucho ma facil amego...


igualemente el header no va en principal, la idea es que este arriba de todo, le pusiste un alto fijo pero el contenido es mas grande y se pasa, las fonts son muy grandes, y acordate usa los clear para limpiar los float.


lo ideal seria algo asi como


HEADER (aca titulo, menu y redes sociales)
Principal(news y events)
y si queres un Footer.

[Mirabilis]

Claro calculo que porque el alto es fijo. Lo que vos queres es que tenga un alto de minimo esto y que se estire mas en caso de?
Los clears que dice bones pense que eran una negrada pero siempre los termino usando.

[Lux]

igualemente el header no va en principal, la idea es que este arriba de todo, le pusiste un alto fijo pero el contenido es mas grande y se pasa, las fonts son muy grandes, y acordate usa los clear para limpiar los float.

lo ideal seria algo asi como

HEADER (aca titulo, menu y redes sociales)
Principal(news y events)
y si queres un Footer.

Che, y Bones, según ese esquema (que es el que yo siempre uso + un wrapper) ponele que todo ocupe el 100% del alto.

El clear de los floats hace que mágicamente calcule el 100 del espacio disponible y no del espacio total (lo que siempre termina dando ese scroll estúpido al final).


Solo necesito confirmaciones, bue.

[Paul_Kraft]

Claro calculo que porque el alto es fijo. Lo que vos queres es que tenga un alto de minimo esto y que se estire mas en caso de?
Los clears que dice bones pense que eran una negrada pero siempre los termino usando.

exactamente. pero no entiendo el code todavia...

[Mirabilis]

Claro lo que pasa es que como flotan las columnas no podes usar auto en el alto porque se "desincronzian" entre las dos.