consulta sobre como puedo ajustar automaticamente los div

__SDP__ · #1 (**permalink**) 21/10/2012, 01:18

hola a todos.

resulta que voy a comenzar a desarrollar un sitio pero mi idea es que la pagina sea al 100% de ancho osea que empieze inmediatamente al 100%.

el problema aparece cuando hago ctr++ para aumentar el tamaño de la pagina y si en eso dos capas chocan no se ajusta o una capa que se detenga y el contenido siga creciendo hacia abajo.

para ser mas preciso es lo que sucede con foros del web, al hacer ctrl ++ varias veces, el contenido aumenta y aumenta y aumenta y el ancho sigue al 100% y cuando ya no puede mas se incrementa y aparece el scroll horizontal de la pagina.

PD: no se si esto pertenece full a css, y si no sorry, no sabia donde exactamente podria ir, porque tambien podria ser en javascript controlando el tecleado de ctrl++ y ajustar dimensiones nose eso se me ocurre.
saludos.

chrishxc · #2 (**permalink**) 21/10/2012, 07:22

Mira información respecto a responsive design.
El tema está en trabajar con porcentajes.

flashmax · #3 (**permalink**) 21/10/2012, 08:14

hola lee este post http://www.forosdelweb.com/f53/impre...strap-1017576/

chrishxc · #4 (**permalink**) 21/10/2012, 09:19

No sé yo si es buena idea sugerir un framework como bootstrap a alguien que no sabe maquetar con porcentajes.

Yo empezaría de cero, maquetando con widths porcentuales.

diegobrice · #5 (**permalink**) 22/10/2012, 12:24

Espero que esto te sirva:

Código HTML:

<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{

		}
		h1,h2,h3,h4,h5,h6,p{
			padding: 10px;
		}
		header{
			background: rgba(0,0,0,0.1);
			width: 100%;
		}
		nav{
			background: rgba(0,0,0,0.3);
			width: 100%;
		}
		section{		
			background: rgba(0,0,0,0.2);	
			width: 70%;
			float: left;
		}
		aside{			
			width: 30%;
			float: left;
		}
		footer{
			background: rgba(0,0,0,0.3);
			width: 100%;
			float: left;
		}
	</style>
</head>
<body>
	<header>
		<h1>Cabezera</h1>
	</header>
	<nav>
		<h2>Botones</h2>
	</nav>
	<section>
		<h2>Contenido Principal</h2>
		<article>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</article>
		<article>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</article>
	</section>
	<aside>
		<h2>Contenido Secundario</h2>
			<h3>Botones Sociales</h3>
			<h3>Links</h3>
			<h3>Publicidad</h3>
	</aside>
	<footer>
		<h2>Pie de Pagina</h2>
	</footer>
</body>
</html>