CODEWITHSUNDEEP
htmlcss
mrdaliri
mrdaliri

Reputation: 7328

How to create a 3 columns fluid fixed fluid layout?

I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:

http://www.uploadup.com/di-UEFI.png

middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)

What is the CSS can do it? with compatibility in all browsers.

note: i saw this page, but i don't know how to change it for my wish

Upvotes: 7

Views: 2721

Answers (3)

kizu
kizu

Reputation: 43214

You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.

So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:

  1. At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
  2. Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
  3. Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
  4. And then just add the all columns that you need.

If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:

  1. You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
  2. There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.

Enjoy :)

Upvotes: 9

thirtydot
thirtydot

Reputation: 228152

To make this work in IE6/7 without JavaScript, the easiest way to do this is with a table.

I know, I know. It's not that bad in this case, all considered.

See: http://jsfiddle.net/thirtydot/Q2Qxz/

Tested in IE6/7 + Chrome, and it will just work in all other modern browsers.

HTML:

<table id="container" cellspacing="0" cellpadding="0">
    <tr>
        <td id="left">fluid</td>
        <td id="mid">fixed</td>
        <td id="right">fluid</td>
    </tr>
</table>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0
}
#container {
    border: 0;
    table-layout: fixed;
    width: 100%
}
#container td {
    vertical-align: top
}
#mid {
    width: 250px;
    background: #ccc
}
#left {
    background: #f0f
}
#right {
    background: #f0f
}

Upvotes: 4

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53597

If you don't use one of the ready templates out there,
You can start by three div floated left, the middle with width: 250px and the outside ones with min-width: 150px
You might want to replace it with the <section> tag, just give it a display: block

Upvotes: 1

Related Questions