hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

cuper90 · #1 (**permalink**) 12/11/2008, 17:44

hola tengo dos columnas en una tabla, ¿como puedo hacer para que la columna 1 tenga exactamente 50 pixeles de ancho y la columna 2 ocupe el resto del ancho de la pantalla??

hice este codigo pero no me funcionó

Código:

<table align="center" border="1" height=60 width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="50" height="60" valign="top">columna1</td>
		<td width="100%" height="60" valign="top">columna2</td>
	</tr>
</table>

Mikmoro · #2 (**permalink**) 12/11/2008, 17:52

Pues tan sencillo como poner 100% a la tabla, 50px a la primera celda y nada a la segunda:

Cita:

<table align="center" border="1" height=60 width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="60" valign="top">columna1</td>
<td height="60" valign="top">columna2</td>
</tr>
</table>

¿No te funciona así?

Si no funciona revisa tu doctype.

Aresillo · #3 (**permalink**) 13/11/2008, 01:39

Mikel, como se hace esto mismo con capas y css...
He mirado varios ejemplos adaptables de tu web pero no entiendo bien algunas cosas...por eso te lo comento para que pongas lo más sencillo y el porqué de algunas cosas...

Si quieres abro otro tema...

Aresillo!!

kseso? · #4 (**permalink**) 13/11/2008, 04:14

Hola Aresillo:
Igual.
Al primer div le fijas la anchura en px, lo flotas (opcional) y al segundo, al no marcarle anchura ocupará de todo el espacio que tenga libre, lo que necesite. Y al no darle una posición definida por css, se colocará adyacente (si es display: inline) al anterior, segú aparece en el html.

Aresillo · #5 (**permalink**) 13/11/2008, 05:03

He estado intentándolo esta mañana pero no conseguía que el height fuera igual en los dos... no queda como si fuera una tabla...
He estado probando y... o estoy atontao...que es posible porque no sé porque tengo problemas en esta tontería! o no sé...
Pongo código:

Código PHP:

  <!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Qué no me sale</title> 
<style> 
* {margin: 0; padding: 0;} 
#izda{ 
background-color: #EBF2FE; 
width:200px; 
} 
#dcha{ 
background-color : #ccc; 
} 
</style> 
</head> 
<body> 
<div id="izda"> 
    <ul> 
        <li>Portada</li> 
        <li>Invierno</li> 
        <li>Diciembre a marzo</li> 
        <li>La chimenea</li> 
        <li>Deportes de invierno</li> 
        <li>Contacto</li> 
    </ul> 
        </div>  
<div id="dcha"> 
    <h1>Título de la página</h1> 
<p>LLorem 
ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum 
commodo orci. Nulla eget purus nec massa cursus ullamcorper. Donec quis 
justo. Pellentesque fermentum. Etiam pharetra, ipsum eget faucibus 
malesuada, ante elit tristique nibh, ut commodo sem dolor aliquam ante. 
Aliquam ut leo rhoncus arcu dictum sodales. Morbi viverra, dui vel 
mollis iaculis, urna libero tincidunt leo, nec interdum ligula lacus 
congue lacus. Nam porttitor, nibh quis scelerisque lobortis, neque diam 
consectetuer magna, sit amet mattis diam quam vitae erat. Donec wisi 
tortor, lacinia et, blandit nec, semper nec, urna. Aliquam erat 
volutpat.</p> 
            <p> Aliquam erat volutpat. Sed ac augue non 
libero commodo lacinia. Morbi molestie augue at felis. Mauris ornare, 
est ac imperdiet vehicula, tortor dui sagittis lacus, sed tempor lorem 
tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum 
sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus 
sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id 
pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero. 
Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere 
in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo 
et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit 
vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing 
nunc. </p> 
            <p> Etiam sodales nulla non neque. Duis 
porttitor faucibus leo. Pellentesque habitant morbi tristique senectus 
et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc, 
sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean 
nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque 
dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. Sed 
dapibus rhoncus sem. Integer blandit elit at mauris. Praesent vel nunc 
a massa lacinia pharetra. Etiam nibh arcu, rhoncus a, ultrices et, 
feugiat in, ipsum. Phasellus suscipit tincidunt urna. </p> 
 
</div>  
 
</body> 
</html>

Lo he flotado y tampoco...

Mikmoro · #6 (**permalink**) 13/11/2008, 05:43

La explicación que te da kseso? es correcta.

Si quieres que la segunda caja quede a la derecha de la primera y ocupe todo el ancho debes añadir float-left a la primera y un margen izquierdo a la segunda:

Cita:

* {margin: 0; padding: 0;}
#izda{
background-color: #EBF2FE;
width:200px;
float:left;
}
#dcha{
background-color : #ccc;
margin-left: 200px;
}

Ahora, si lo que quieres es que la primera crezca tanto como la segunda, eso ya es otro tema, de cómo hacer columnas equlibradas. Hay varias maneras. Esta es sólo una de ellas.

Aresillo · #7 (**permalink**) 13/11/2008, 05:56

Vale! Gracias a los dos...
Hasta lo que decías Mikmoro había llegado, y había visto justo el ejemplo que me das... pero no lo entendía muy bien...
Si veo que no lo entiendo, abro un tema para explicar el ejemplo...

Gracias!

Aresillo!!

Mikmoro · #8 (**permalink**) 13/11/2008, 06:11

De acuerdo.
El asunto básicamente es que una columna no tendría por qué crecer porque crezca la otra, y en CSS hay que hacer alguna filigrana para conseguir eso.

Ya comentarás.

Aresillo · #9 (**permalink**) 13/11/2008, 07:32

Ya está!
No lo he sacao pero medio buceando por ahí y borrando...dejándolo limpito el diseño líquido dos columnas autoajustables queda así...(haata que venga mik)

Código HTML:

<!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>
<title>Diseño líquido dos columnas autoajustable</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#container{
width: 100%;
background-color: #9cf;
}
#leftnav{
float: left;
width: 200px;
}
#content{
margin-left: 200px;
background: #cce;
}
</style>
</head>

<body>
<div id="container">
<div id="leftnav">
	<ul>
		<li>Home</li>
		<li>Noticias</li>
		<li>Datos de interés</li>
		<li>Links</li>
		<li>Contacto</li>
	</ul>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</body>
</html>

Aresillo!!

Mikmoro · #10 (**permalink**) 13/11/2008, 07:43

Correcto. Esta es una de las opciones, que funciona en caso de que crezca la columna derecha únicamente, no si lo hace la izquierda, que suele ser una de las principales batallas.

cuper90 · #11 (**permalink**) 13/11/2008, 14:38

Cita:

Iniciado por Mikmoro

Pues tan sencillo como poner 100% a la tabla, 50px a la primera celda y nada a la segunda:

¿No te funciona así?

Si no funciona revisa tu doctype.

aah estaba casi seguro de que habia intentado eso antes

pero al parecer no, por que ahora lo hice y si me funcionó
gracias

Mikmoro · #12 (**permalink**) 13/11/2008, 17:31

De nada, es un placer.

Muchas veces uno cree haberlo probado todo... menos lo correcto

Saludos.