Diseño div de dos columnas con columna izquierda fluida y columna derecha fija
Quiero hacer un diseño de dos columnas usando DIVs, donde la columna derecha tendrá un ancho fijo de 200px y la izquierda tomaría todo el espacio que queda.
Es bastante fácil, si utilizas tablas:
<table width="100%">
<tr>
<td>Column 1</td>
<td width="200">Column 2 (always 200px)</td>
</tr>
</table>
Pero ¿qué hay de DIVs? Es posible lograr esto? Si es así, ¿entonces cómo?
7 answers
Los siguientes ejemplos están ordenados por fuente, es decir, la columna 1 aparece antes de la columna 2 en la fuente HTML. Si una columna aparece a la izquierda o a la derecha está controlada por CSS:
Fijo a la derecha
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Fijo izquierda
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
La solución alternativa es usar display: table-cell; lo que resulta en columnas de igual altura.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:33
Aquí hay una solución (y tiene algunas peculiaridades, pero hágamelo saber si las nota y que son una preocupación):
<div>
<div style="width:200px;float:left;display:inline-block;">
Hello world
</div>
<div style="margin-left:200px;">
Hello world
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-13 08:16:06
CSS:
#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}
HTML:
<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>
Lo anterior debería funcionar, puede poner ese código en envoltura si desea darle ancho y centrarlo también, overflow:hidden
en la columna sin ancho es la clave para que contenga, verticalmente, como en no envolver alrededor de las columnas laterales (puede ser izquierda o derecha)
IE6 might need zoom:1
set on the #content div too if you need it's support
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-13 08:18:04
Solución CSS
#left{
float:right;
width:200px;
height:500px;
background:red;
}
#right{
margin-right: 200px;
height:500px;
background:blue;
}
Compruebe el ejemplo de trabajo en http://jsfiddle.net/NP4vb/3 /
JQuery Solution
var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);
Compruebe el ejemplo de trabajo http://jsfiddle.net/NP4vb /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-13 08:37:00
Recientemente se me mostró este sitio web para diseños líquidos utilizando CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Echa un vistazo a las páginas de demostración en los enlaces a continuación).
El autor ahora proporciona un ejemplo para diseños de ancho fijo. Salida; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width .
Esto proporciona lo siguiente ejemplo(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (para el diseño de dos columnas como usted está después creo)
Http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (para el diseño de tres columnas).
Lo siento por tantos enlaces a este sitio de chicos, pero creo que es un recurso impresionante.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-13 08:01:17
Creo que esta es una respuesta simple , esto dividirá a los desarrolladores secundarios 50% cada uno basado en el ancho del padre.
<div style="width: 100%">
<div style="width: 50%; float: left; display: inline-block;">
Hello world
</div>
<div style="width: 50%; display: inline-block;">
Hello world
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-03 03:35:33
#wrapper {
margin-right: 50%;
}
#content {
float: left;
width: 50%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-23 23:56:06