Diseño CSS: 2 columnas fijo-fluido (otra vez)

Estoy tratando de configurar un diseño de 2 columnas donde el área de la izquierda está fija y el contenido principal es fluido. He visto varias respuestas aquí, que tienden a funcionar. Sin embargo, existe un comportamiento extraño cuando uso un “jsTree” en mi área “izquierda” y las tabs jQuery UI en el área principal / contenido.

html

css

 #left { float: left; width: 200px; overflow: auto; } #right { margin: 0 0 0 200px; } 

javascript

 $(document).ready(function() { $('#right').tabs(); $('#tree').jstree({ "plugins" : [ "json_data", "themes"], "json_data" : { "data" : [ { "data" : "A node", "children" : [ "Child 1", "Child 2" ] }, { "attr" : { "id" : "li.node.id" }, "data" : { "title" : "Long format demo", "attr" : { "href" : "#" } } } ] }, }); }); 

El problema que tengo es que, al expandir el árbol (a la izquierda), las tabs de la derecha empiezan a ponerse de moda. El área que contiene las tabs (el elemento que creo) crece verticalmente.

Eche un vistazo aquí para ver este ejemplo: http://jsfiddle.net/codecraig/gBUw2/

Josiah tiene razón, pero una mejor solución es cambiar la naturaleza de la técnica de corrección de errores. El .ui-helper-clearfix hace esto:

 .ui-helper-clearfix::after { clear: both; content: '.'; display: block; height: 0px; visibility: hidden; } 

Y el problema es el clear:both . Puede obtener la limpieza deseada sin perder la visualización de bloque de ancho completo con esto:

 #right .ui-helper-clearfix { clear: none; overflow: hidden; } 

Eso reemplaza a clear:both clear-fix con un overflow:hidden clear-fix overflow:hidden .

http://jsfiddle.net/ambiguous/BkWWW/

El encabezado de las tabs del widget tiene una solución clara. violín actualizado . Podría arreglar esto con un diseño no flotante, o anular el css así:

 #right .ui-helper-clearfix { display: inline-block; } 

Esto lo hace para que el encabezado no expanda todo el ancho del contenedor sin embargo.

Todo lo que necesitas hacer es simplemente ajustar tu css, así:

 #left { float: left; width: 23%; overflow: auto; } #right { float: left; width: 75%; display: block; } 

Esto también solucionaría el problema de que el contenedor de las tabs no se expande a todo el ancho. Aunque puedes ajustar el porcentaje de ancho de # correcto a lo que quieras.