CODEWITHSUNDEEP
htmlcss
Richard
Richard

Reputation: 1041

3 column css, middle fixed size, right and left fluid

I'm trying to render a 3 column design with the following :

Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite. I've partially achieved my goal using 

display: inline-block;
vertical-align: top;

Here's the fiddle.

What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.

Upvotes: 2

Views: 655

Answers (3)

Blazemonger
Blazemonger

Reputation: 92893

If you want table-like behavior, you should use display: table-cell in your CSS:

.fenetre {
    display: table-row;
}
.section {
    display: table-cell;
}
#right {
    width: 50%;
}
#middle {
    min-width: 660px;
    max-width: 660px; // just 'width: 660px' won't be enough here
}    
#left {
    width: 50%;
}

http://jsfiddle.net/mblase75/zL9cn/

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Use calc to achieve this.

It is a native CSS way to do simple math right in CSS as a replacement for any length value.

Please note that calc does not work with all browsers.

Write:

#left, #right {
    min-width:120px;
    width:calc(50% - 330px); // half of 660px
}

As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.

See updated fiddle here.

Upvotes: 3

sylwester
sylwester

Reputation: 16498

http://jsfiddle.net/hdt75/

.fenetre {
    text-align: center;
    width:1200px;
    background-color: grey;
    margin:  0 auto;
}

Upvotes: 1

Related Questions