жидкость содержания вопроса макета с CSS

Question

У меня есть вопрос компоновки:

.sectorMenuContentPane { 
    float: left; 
    width: 25%; 
} 

.sectorContentPane { 
    float: left; 
    width: 75%; 
} 

.sectorContentPaneRight { 
    float: right; 
    width: 32%; 
} 

Вот мои макеты, используя тот же CSS:

В макете в 3 колонок страница выглядит хорошо, но в 2 расположение столбца сломан. Как я могу это сделать, если нет сектораContentPaneRight, а секторContentPane заполняет область по моей диаграмме?

Как будто мне нужна жидкость? Можете ли вы помочь мне с примером jsfiddle?

Answer 1

Таблицы - ваше самое легкое решение. Вот пример использования дивы с display: table

http://jsfiddle.net/9x2SC/

Левые и правые клетки имеют множество ширину. Центр заполнит оставшееся пространство. Это будет ваше единственное 100% -е решение css. Вы можете использовать JavaScript, чтобы определить, что делать и применить класс к элементу обертки, но это более элегантно (на мой взгляд).

CSS:

.wrapper { 
    display: table; 
    width: 100%; 
    height: 100px; 
} 

.sectorMenuContentPane { 
    display: table-cell; 
    width: 25%; 
} 

.sectorContentPane { 
    display: table-cell; 
} 

.sectorContentPaneRight { 
    display: table-cell; 
    width: 32%; 
}​ 

Answer 2

Простое решение: http://jsfiddle.net/JdpYP/

CSS

.menu { 
    float: left; 
    width: 25%; 
} 

.slider { 
    float: left; 
    width: 32%; 
} 

просто избежать плавать крайний правый DIV

Answer 3

Не уверен, что это именно то, что вам нужно?

<div id="menu"></div> 
<div id="right"> 
    <div id="slider"></div> 
    <div id="content"></div> 
</div> 

<style> 
    #menu { width:25%; height:400px; border:2px solid #000; float:left; margin-right:10px; } 
    #slider, #content { width:48%; height:400px; border:2px solid #000; float:left; margin-right:10px; } 
    #right { width:74%; height:400px; float:left; } 
</style> 

Answer 4

Теперь, когда вы знаете, что CSS3 в настоящее время используется многими из них ..

Это можно легко сделать с помощью CSS3.

Вот как это сделать ..

.containerOfDivs{ 
    width:950px; 
    display:-webkit-box; 
    -webkit-box-flex: 1; 
    -webkit-box-orient: horizontal; 
} 

.sectorMenuContentPane{ 
    width: 250px; 
} 

.sectorContentPane { 
    display:-webkit-box; 
    -webkit-box-flex: 1; 
} 

.sectorContentPaneRight { 
    width: 250px; 
}