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%;
}​