Using CSS to layout three columns, left / right size, medium liquid

Question

I need 3 column layouts, the sizes of the first and third columns are variable, because there will be an image or text of variable length (or another image), but I need to fill the rest space with a background image, something like this, if it would work as 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

, . , , .

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; }

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

, :

• , DIV, " : "
• , , = 100% (, 2 , 50%)

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;}

→ http://jsfiddle.net/5xfR9/39/

Answer 3

, , , , ?

jsfiddle Eriks: 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 added the clearfix class to make sure that the container really contains columns so that the background can display (this is the clearfix class from the HTML5 version of the Boilerplate).

Answer 4

You just need to play around with the min-width and max-width options until you get what you want. And it seems that this is easiest when you give the columns the maximum width as a percentage of the body or wrapper.

The following is a working example:

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%;
}