CSS的可变内容布局问题

Question

I have a layout issue:

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

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

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

Here are my layouts using the same css:

In the 3 column layout the page looks fine but in the 2 column layout its broken. How can i make it so if there isnt a sectorContentPaneRight then sectorContentPane fills the area as per my diagram?

Also as if i need it fluid? Can you help me with a jsfiddle example?

Answer 1

Tables will be your easiest solution. Here's an example using divs with display: table

http://jsfiddle.net/9x2SC/

The left and right cells have a set width. The center one will fill the remaining space. This will be your only 100% css solution. You could use Javascript to determine what to do and apply a class to the wrapper element, but this is more elegant (in my opinion.)

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

A simple solution: http://jsfiddle.net/JdpYP/

css

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

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

just avoid to float the rightmost div

Answer 3

Now as you know that CSS3 is being used by a lot of them..

This can be done easily using CSS3.

Here is how you do it..

.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;
}

Answer 4

Not sure if this is the kind of thing you are after?

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