Foros del Web » Creando para Internet » CSS »

Segunda columna al 100%

Estas en el tema de Segunda columna al 100% en el foro de CSS en Foros del Web. Tengo este css Código: #leftside{ left:0px; top:0px; position:absolute; width:220px; height: auto!important; min-height: 100%; height: 100%; background:#2F74B1 url('../images/administracion/later_adm.gif'); background-repeat:repeat-x; text-align:right; } #rightside{ top:0px; left:220px; position:absolute; width:100%; ...
  #1 (permalink)  
Antiguo 07/05/2009, 03:17
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Segunda columna al 100%

Tengo este css

Código:
#leftside{
	left:0px;
	top:0px;
	position:absolute;
	width:220px;	
	height: auto!important;
	min-height: 100%;
	height: 100%;
	background:#2F74B1 url('../images/administracion/later_adm.gif');
	background-repeat:repeat-x;
	text-align:right;
}
#rightside{
	top:0px;
	left:220px;
	position:absolute;
	width:100%;
	height: auto!important;
	min-height: 80%;
	height: 80%;
	background:#faffff url('../images/administracion/curv_admin.gif') no-repeat top left;
	clear:right;
}
Se corresponden a una página donde hay dos columnas el de la izquierda tiene siemple ese tamaño. El de la derecha necesito que se adapte al ancho de pantalla que queda. El problema es que en el width de rightside si le pongo el 100% tal como está me incluye lo que queda más los 220px de leftside y me aparece el scroll horizontal de la pantalla. La propiedad auto tampoco sirve porque depende del contenido.
En difinitiva la primera columna es de ancho fijo y necesito que la segunda coja siempre el ancho de pantalla. Gracias de antemano.
  #2 (permalink)  
Antiguo 07/05/2009, 04:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Segunda columna al 100%

hola amigo pues la verdad habría que ver como quieres que quede pero asta donde te entendi no se puede lo que tu pides en mi caso lo aria de la siguiente manera

CSS:
Código HTML:
html, body{margin:0; padding:0; height:100%;}
#cont{width:100%; height:100%;}
#leftside{
	width:220px;	
	height: 100%;
	background:#2F74B1 url(img/later_adm.gif) repeat-x;
	text-align:right;
	float:left;
	margin-right:10px;
	padding:0 10px;
}
HTML:
Código HTML:
<div id="cont">
  <div id="leftside">hola</div> mundo 
  </div> 
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 07/05/2009, 05:44
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Segunda columna al 100%

Pongo un código más completo
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>dos columnas</title>
<style type="text/css">
html,body{
	margin:0px;
	padding:0px;
	background-color:#2F74B1;
	height:500px;
}
#side{
	position:relative;
	width:100%;
	height: auto!important;
	min-height: 100%;
	height: 100%;
	background:#2F74B1;
	border:0px solid #000;
}
#leftside{
	left:0px;
	top:0px;
	position:absolute;
	width:220px;	
	height: auto!important;
	min-height: 100%;
	height: 100%;
	background-color:#2F74B1;
	text-align:right;
}
#rightside{
	top:0px;
	left:220px;
	position:absolute;
	width:auto;
	height: auto!important;
	min-height: 100%;
	height: 100%;
	background:#faffff; 
	padding:1em;
}
</style>
</head>
<body>
<div id="side"> 
	  <div id="leftside"> 
		menu
	  </div>
	  <div id="rightside"> 
					contenido
					<div class="pie"> 
							<a href="http://jigsaw.w3.org/css-validator/check/referer"><img  src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="¡CSS Válido!" /></a> 
							<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> 
					</div>
					 
				
	  </div>
</div>
</body>
</html> 
Yo quiero que rightside sea siempre el 100% de lo que queda de la pantalla, en la parte izquierda va un menú y en la derecha el contenido.
  #4 (permalink)  
Antiguo 07/05/2009, 11:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Segunda columna al 100%

ok ya te capte la idea intenta en el #rightside:
position:absolute; > quitarlo
left:220px; > quitarlo
width:auto; > cambiarlo por width:100%;
padding-left:220px; > agregarlo

tu padding:1em; ya es cuestión tuya si lo dejas o quitas

que quede algo así:

Código HTML:
#rightside{
	top:0px;
	width:100%;
	height: auto!important;
	min-height: 100%;
	height: 100%;
	background:#faffff; 
	padding:1em;
	padding-left:220px;
}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 08/05/2009, 16:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Segunda columna al 100%

Hola:

Deberás dejarlo así:

Código:
            #rightside{
	            top:0px;
	            height: auto!important;
	            min-height: 100%;
	            height: 100%;
	            background:#faffff; 
	            padding:1em;
	            padding-left:220px;
            }
La única duda es donde pones el pie porque en el código que has puesto no aparece definida la clase pie.

Saludos.

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 02:28.