Using CSS for 3 column layout, left/right variable size, mid fluid

Question

I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :

HTML:

<div class="left-vp">
   <img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">

</div>
<div class="right-vp">
<p>
    //some text here or another img
</p>
</div>

CSS

 .left-vp {
    float: left;
 }

 .mid-vp {
    height: 2px;
    background: #FFFFFF url("images/dot.png") repeat-x;
    width: 100%;
 }
 .right-vp {
    float: right;
 }

Is something like this possible with CSS?

Answer 1

If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.

HTML

<div class="container">
  <div>
    <div class="col col1">
      <div class="nowrap">Column 1</div>
    </div>
    <div class="col col2 fill center">
      <div class="nowrap">Column 2</div>
    </div>
    <div class="col col3">
      <div class="nowrap">Column 3</div>
    </div>
  </div>
</div>

CSS

.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }

.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }

.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }

In action: http://jsfiddle.net/Vxc3n/1/

A few things to keep in mind:

1. If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
2. If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
3. You won't be able to shrink the columns beyond the minimum required width

Answer 2

HTML

<div id="container">
   <div id="left"></div>
   <div id="right"></div>
   <div id="center"></div>
</div>

CSS

#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px;  background-color: blue;}

in action -> http://jsfiddle.net/5xfR9/39/

Answer 3

I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?

As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/

HTML

<div id="container" class="clearfix">
  <div id="left">some text</div>
  <div id="right">some text</div>
</div>

CSS

#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).

Answer 4

You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.

Here is a working example i put together:

http://jsfiddle.net/76Ep3/1/

HTML

<div id="wrap">
    <div id="left">LEFT content...</div>
     <div id="center">CENTER content...</div>      
    <div id="right">Right content</div>
</div>

CSS

 *{margin:0;padding:0;}

body, html{
    height:100%;
}

#wrap {
    min-width:390px;
    height:100%;
}

#left{
    float:left;
    min-width:100px;
    max-width:37%;
    margin:0 auto;
    background-color:blue;
    height:100%;
}

#center {
    float:left;
    min-width:100px;
    max-width:20%;
    background-color:red;    
    height:100%;
}

#right {
    float:left;
    min-width:100px;
    max-width:37%;
    background-color:yellow;
    height:100%;
}