7

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349
mrdaliri
  • 7,148
  • 22
  • 73
  • 107
  • I take it "all browsers" includes IE7. Does it also include IE6? – thirtydot Oct 08 '11 at 20:31
  • yes, but i can use an other css file for ie6 – mrdaliri Oct 08 '11 at 20:33
  • 1
    I seldom say this, but you really should just learn CSS instead of asking people to do this for you. The reason is, you will not understand how to modify the CSS when you need to. CSS is something that will pay off if you spend the time to learn it. – Erik Funkenbusch Oct 08 '11 at 21:10

3 Answers3

9

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

kizu
  • 42,604
  • 4
  • 68
  • 95
  • 20 minutes ago I didn't think this would work in IE6, but it does. This is perfect if the columns don't have to be equal height. – thirtydot Oct 08 '11 at 21:21
  • Yeah, however it's sad that you need extra wrappers and overflow:hidden just for IE. – kizu Oct 08 '11 at 21:25
  • I get white borders displayed between the divs. How can I avoid this? (can be reproduced by using TidyUp in fiddle and Run the code again) – purbsel Mar 21 '14 at 10:00
4

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
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

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

Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278