Segunda columna al 100%

xurxinho · #1 (**permalink**) 07/05/2009, 02:17

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.

ArturoGallegos · #2 (**permalink**) 07/05/2009, 03:11

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>

xurxinho · #3 (**permalink**) 07/05/2009, 04:44

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.

ArturoGallegos · #4 (**permalink**) 07/05/2009, 10:42

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;
}

jomaruro · #5 (**permalink**) 08/05/2009, 15:33

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.