Foros del Web » Creando para Internet » CSS »

Necesito hacer dos div del mismo tamaño de forma automatica

Estas en el tema de Necesito hacer dos div del mismo tamaño de forma automatica en el foro de CSS en Foros del Web. Ayuda con CSS, necesito hacer dos div del mismo tamaño de forma automatica. Como referencia pueden ver mi maqueta por favor: [URL="http://inacra2010.webcindario.com/"]http://inacra2010.webcindario.com/[/URL] en esta maqueta ...
  #1 (permalink)  
Antiguo 17/03/2011, 18:14
 
Fecha de Ingreso: julio-2008
Mensajes: 56
Antigüedad: 9 años, 4 meses
Puntos: 2
Pregunta Necesito hacer dos div del mismo tamaño de forma automatica

Ayuda con CSS, necesito hacer dos div del mismo tamaño de forma automatica.

Como referencia pueden ver mi maqueta por favor: [URL="http://inacra2010.webcindario.com/"]http://inacra2010.webcindario.com/[/URL] en esta maqueta el problema es lo que he pintado de rojo la idea es que se haga mas grande degun el contenido pero no logro lo que necesito, para que se vea eso rojo tube que colocar un min-height:150px; , este es un div que contiene otros dos(div wrapper con tiene sidebar y contenedor).

aqui esta el html: nombre index.php

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>::: --- Página Oficial del Instituto Nacional de Apopa ::: ---</title>
	<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="encabezado"><!--Inicio encabezado-->
		<div id="logo"><!--Inicio logo-->
			Instituto Nacinal de Apopa
		</div><!--Fin lgo-->
		<div id="navi"><!--Inicio menu-->
			<?php include_once('menu.php');?>
		</div><!--Fin menu-->
		<div id="search"><!--Inicio buscador-->
			<form action="resultados.php" method="get" name="cse-search-box" id="cse-search-box" target="_blank" class="form_search">
			<div><input type="hidden" name="cx" value="014367080511235769642:etzgzhey51i" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="22" /> <input type="submit" name="sa" value="Buscar en Google" /></div>
			</form>
			<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=es">
										</script>
		</div><!--Fin buscador-->
		<div id="frases"><!--Inicio frases-->
			FRases
		</div><!--Fin frases-->
		
	</div><!--Fin encabezado-->
	<div id="wrapper">
		<div class="sidebar"><!--Inicio sidebar-->
			<div class="widget">
				Widget
			</div>
			<div class="widget">
				Widget
			</div>
			<div class="widget">
				Widget
			</div><!--Fin sidebar-->
		</div>
		<div class="contenedor"><!--Inicio contenedor-->
			<div class="contenido_principal">
				<h1>Titulo 1 </h1>
				<p>Mensaje de Bienvenida. En este sitio encontrarás toda la información actualizada sobre el instituto, un poco de historia, presente y futuro..Es un sitio muy sencillo pero que contiene la información suficiente para que lo conozcas. Si eres alumno actual, ex alumno, empleado, ex-empleado o amigo de la institución te identificaras con muchas de las actividades que aca se detallan. Fotos o evidencias de eventos realizados en la institución, encontrarás desde los años de 2000 para acá, puesto que en años anteriores no se tenían los recursos con los que ahora se cuentan. Asi que si tienes fotos o clips de videos antiguos y quieres que se coloquen en este sitio, solo debes comunicarte con nosotros.</p>
				<br />
				</div>
		</div>
	</div>
	<div id="footer">
2010&nbsp;-&nbsp;<?php echo date('Y')?> - Web Master Gustavo L&oacute;pez.<br />
Todos los derechos reservados&nbsp;&nbsp;||&nbsp;&nbsp;.
	</div>
</body>
</html>
este es el CSS: nombre styles.css
Código:
/*INICIO RESET CSS*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: text-bottom;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body { 	line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*FIN RESET CSS*/
body{ background-color:#8BD8CE}

.clear{	clear:both; width:10px; }

	#encabezado{ width:900px; height:200px; background-color:#CCCCCC; margin:auto; }
		#logo{ width:90%; background-color:#0066FF; height:140px; margin:auto; }
		#navi{ width:65%; background-color:#00FFCC; height:60px; float:left;}
			/*menu*/
			#menu {text-align: center;
			font-size: 0.7em;
			width: 600px;
			margin:13px 0px 0px 8px;
			}
			#menu ul {list-style-type: none;
			}
			#menu ul li {width: 140px;
			}
			#menu ul li.nivel1 { float: left;
			margin-right: 1px;
			}
			#menu ul li a {display: block;
			text-decoration: none;
			color: #fff;
			background-color: #399;
			border: solid 1px #fff;
			padding: 7px;
			position: relative;
			}
			#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
			}
			#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
			position: relative;
			}
			#menu ul li:hover {position: relative;
			}
			#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
			color: #000;
			position: relative;
			}
			#menu ul li ul {display: none;
			}
			#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{display: block;
			position: absolute;left: 0px;
			}
			#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
			position: absolute;
			left: 140px!important;left: 140px;
			top:0px!important;top: -21px;
			}
			#menu ul li ul li a {width: 140px;
			padding: 8px 0px;
			border-top-color: transparent;
			}
			#menu ul li ul li a:hover {border-top-color: #000;
			position: relative;
			}
			#menu ul li ul li ul li a.primera {border-top-color: #fff;
			}
			table.falsa {border-collapse:collapse;
			border:0px;
			float: left;
			position: relative;
			}
		#search{ width:35%; background-color:#99CC66; float:right; height:60px;}
			.form_search{ padding:17px 0px 0px 5px; text-align:center}
		#frases { width:98%; height:30px; padding:10px 10px; font-size:10px;	font-family:verdana,Arial, Tahoma,Century gothic,  sans-serif;text-align:center; font-style:italic; background-color:#CCFFFF; margin:auto; float:left; }
	#wrapper{ width:900px; height:auto; background-color:#FF0000; margin:auto; min-height:150px }
		.sidebar{ width: 200px; float:left; background-color:#993; height:auto;}
			.widget{ width:200px; margin-bottom:10px; float:left; }
			.widget h3{ font-size:15px; margin:0; display:block; text-align:center; padding:5px; color:#ccc; background:#777}
		.contenedor{ width: 700px; background-color:#99CCCC; height:auto; float:left; min-height:100px; }
			.contenido_principal { line-height:14px; background-color: #33ccff; font-size:17px; font-family:Arial, Helvetica, sans-serif; }
				.contenido_principal h1{ text-align:center; font-size:24px; line-height:30px; font-weight:bold; }
				.contenido_principal p{ text-align:justify;}
				.center{ text-align:center; }
	#footer{ width:900px; height:auto; background-color:#c3c3c3; margin:auto; }
Al aumentar el contenido de la clase contenedor no aumenta el tamaño del wrapper. al resolver este problema prometo postear el codigo por si le es de utilidad a alguien mas...
  #2 (permalink)  
Antiguo 17/03/2011, 19:58
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Necesito hacer dos div del mismo tamaño de forma automatica

Añade la propiedad overflow:hidden; al css de #wrapper y comprueba si funciona como esperas.
  #3 (permalink)  
Antiguo 18/03/2011, 11:33
 
Fecha de Ingreso: julio-2008
Mensajes: 56
Antigüedad: 9 años, 4 meses
Puntos: 2
Busqueda Respuesta: Necesito hacer dos div del mismo tamaño de forma automatica

Cita:
Iniciado por sanxuan Ver Mensaje
Añade la propiedad overflow:hidden; al css de #wrapper y comprueba si funciona como esperas.
Excelente aporte compañero sanxuan, eso creo que soluciona mi problema.

Solo una consulta:¿Qué hace exactamente esa propiedad CSS? es que no termino de comprender su uso mas puedo persivir bien su efecto.
  #4 (permalink)  
Antiguo 18/03/2011, 11:47
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Necesito hacer dos div del mismo tamaño de forma automatica

Cita:
Iniciado por jglm210687 Ver Mensaje
¿Qué hace exactamente esa propiedad CSS? es que no termino de comprender su uso mas puedo persivir bien su efecto.
http://www.librosweb.es/referencia/css/overflow.html
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 18/03/2011, 17:36
 
Fecha de Ingreso: julio-2008
Mensajes: 56
Antigüedad: 9 años, 4 meses
Puntos: 2
Sonrisa Respuesta: Necesito hacer dos div del mismo tamaño de forma automatica

Cita:
Iniciado por gVenom Ver Mensaje
[url]http://www.librosweb.es/referencia/css/overflow.html[/url]
Muchas gracias por la respuesta, estudiare un poco mas sobre los css ya que es es una forma muy facil de crear sitios web reutilizando el codigo.

Etiquetas: html, mysql, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:42.