CSS - Fluid column

Question

Here is my code: http://jsfiddle.net/2Mtcq/.

I want the middle column to be fluid, but left and right colums - to be set width. How do I make the middle fluid? I want it to look something like:

https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png

body {
    margin:10px;
}

#header {
    width:600px;
    background-color: #f0efee;
}


#main{
    width:600px;
}
#leftcol {
    background-color: #f0efee;
    float:left;
    margin: 10px 10px 10px 0;
    width:100px;
}
#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}
#rightcol {
    background-color: #FCF;
    float: left;
    margin: 10px 0 10px 0;
    width:100px;
}

#footer {
    width:600px;
    background-color: #f0efee;
    clear:both;
}

Click "Save" after you have the fiddle set up and send us that link. — David Starkey, May 31 '13 at 16:07

score 1 · Accepted Answer · 2013-05-31T16:28:08.033

1

Working jsFiddle Demo

Change your HTML to this one:

<div id="main">
    <div id="leftcol">Left</div>
    <div id="rightcol">Right</div>
    <div id="midcol">Middle middle Middle middle Middle middle</div>
</div>

I've put midcol after left and right.

And in your CSS:

Float your rightcol element with right.
Change the margin of midcol to margin: 0 110px; (from left and right, each 110px: 100px for columns, 10px for gaps.
Add margin: 10px 0; to #main element.
Remove unnecessary properties.

Here you are:

#main {
    width:600px;
    margin: 10px 0;
}

#leftcol {
    background-color: #f0efee;
    float:left;
    width:100px;
}

#midcol {
    background-color: #FFC;
    margin: 0 110px;
}

#rightcol {
    background-color: #FCF;
    float: right;
    width:100px;
}

Also you can make your #main width to 100% for having a full page width:

#main {
    width: 100%;
    margin: 10px 0;
}

edited May 31 '13 at 16:28

answered May 31 '13 at 16:17

But that middle column isn't fluid, it still has a fixed with, only limited because of the 100px margin left and right, but e.g. if you resize the outer columns, the middle isn't matching the empty space again. See: http://jsfiddle.net/2Mtcq/5/ – bpoiss May 31 '13 at 16:23
1

@BernhardPoiss It's **fluid**, but you can't see its behaviour, because the parent `#main` is `600px` width. Change it 100% and you will see its functionality. See this [jsFiddle](http://jsfiddle.net/2Mtcq/6/). And thanks for your comment, I'll add it to my answer `;)`. – May 31 '13 at 16:26
Ah, this does the trick, I didn't consider the outer divs width. – bpoiss May 31 '13 at 16:31
Thanks, it looks good. I can't test in IE7 right now, any idea if it works with that too? – tuco May 31 '13 at 16:42
Heh, fluid layout with tables, back in the days, seemed much less hacky. – tuco May 31 '13 at 17:08

score 1 · Answer 2 · answered May 31 '13 at 16:21

1

If you are not supporting IE8, you can use calc on your CSS.

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: calc(100% - 220px);
}

For see browser support click here

answered May 31 '13 at 16:21

Vinícius Moraes

3,506
2
22
24

score 0 · Answer 3 · answered May 31 '13 at 16:16

0

Try This

#midcol {
    min-width:100px;
    width:auto;
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}

answered May 31 '13 at 16:16

geovani075

369
1
2
12

score 0 · Answer 4 · edited May 23 '17 at 12:18

Have a look at this, gives an explanation about this: Div width 100% minus fixed amount of pixels

it explains all the details

the best solution i see is using css calc as stated in that link.

example here: http://jsfiddle.net/2Mtcq/7/

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: -moz-calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);

}

browser support of calc here: http://caniuse.com/calc

you could use that and as a worst case have JS fallback.

CSS - Fluid column

4 Answers4

Linked