texto por para pagina hacer dividir div como columnas colocar codigo alinear html css fluid-layout

para - dividir por columnas html



DiseƱo dividido en dos columnas con columna izquierda y derecha fija (7)

Quiero hacer un diseño de dos columnas usando DIV, donde la columna derecha tendrá un ancho fijo de 200px y el izquierdo tomará todo el espacio que quede.

Es bastante fácil, si usas 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?


Aquí hay una solución (y tiene algunos caprichos, pero avíseme si los 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>


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, puedes poner ese código en el contenedor si quieres darle ancho y centrarlo también, overflow:hidden en la columna sin ancho es la clave para lograr que contenga, verticalmente, como si no se envolviera alrededor del columnas laterales (pueden ser hacia la izquierda o hacia la derecha)

IE6 podría necesitar zoom:1 configurado en # div de contenido también si lo necesitas es soporte


Creo que esta es una respuesta simple, esto dividirá los desarrolladores hijos 50% cada uno basado en el ancho 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>


Los siguientes ejemplos están ordenados por fuentes, es decir, la columna 1 aparece antes de la columna 2 en el código fuente HTML. Si una columna aparece a la izquierda oa la derecha está controlada por CSS:

Derecho fijo

#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>

Corregido a la 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 ; que da como resultado columnas de igual altura.


Recientemente se me mostró este sitio web para diseños líquidos usando CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Eche 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. Revisa; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width .

Esto proporciona los siguientes ejemplos, http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (para el diseño de dos columnas como lo es después de que pienso)

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (para el diseño de tres columnas).

Perdón por tantos enlaces a este sitio de chicos, pero creo que es un recurso INCREÍBLE.


CSS Solutuion

#left{ float:right; width:200px; height:500px; background:red; } #right{ margin-right: 200px; height:500px; background:blue; }

Ver ejemplo de trabajo en http://jsfiddle.net/NP4vb/3/

Solución jQuery

var parentw = $(''#parent'').width(); var rightw = $(''#right'').width(); $(''#left'').width(parentw - rightw);

Ver ejemplo de funcionamiento http://jsfiddle.net/NP4vb/


#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>