How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

jsFiddle:

How do I make div2 + Button2 fill the rest of the window width if I use pixel metric on column 1 and 3?

I'll use that to format a form making a textbox to change the size as two other fields are fixed.

Thank you.

CSS

td { border:solid 1px #000; float:left; }

#div1 { width:100px; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:100px; border:solid 1px #000; float:right; }

#Button1 { width:100% }
#Button2 { wid开发者_JAVA技巧th:100% }
#Button3 { width:100% }

HTML

<div id="div1">
    <button id="Button1">Button 1</button>
</div>
<div id="div2">
    <button id="Button2">Button 2</button>
</div>
<div id="div3">
    <button id="Button3">Button 3</button>
</div>

Another solution is moving the second DIV to the bottom and applying margins on it without float: http://jsfiddle.net/xC7uZ/6/

As far as I know, there are only two ways of doing this:

1. Using tables - most people do not like this idea. I for one, think it's fine for overall layout as long as you don't go overboard with nested tables and stuff. Kalle's answer covers this option

2. Using absolute positioning specifying all four corners. I only recently discovered this method and it works beautifully. It works in all major browsers.

Something like this:

#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }

Here is one to make you guys think :)

<div class="maincontainer">
    <div class="column01">
        <div class="restraint">
            <p>Left column</p>
        </div>
    </div>
    <div class="column03">
        <div class="restraint">
            <p>Right column</p>
        </div>
    </div>
    <div class="column02">
        <div class="restraint">
            <p>Middle column</p>
        </div>
    </div>
</div>

and the CSS:

.maincontainer {
position:relative;
overflow:hidden;
}

.maincontainer .column01 {
float:left;
}

.maincontainer .column01 .restraint,.maincontainer .column03 .restraint {
width:200px;
}

.maincontainer .column03 {
float:right;
}

.maincontainer .column02 {
overflow:hidden;
}

.maincontainer .column02 .restraint {
width:100%;
}

* html .maincontainer .column02 {
display:inline-block;
}

I will get hammered for using <table>, but this is the most flexible and crossbrowser method. It works in ie5 ^^

http://jsfiddle.net/hobobne/24urb/

En este ejemplo vemos como poner tres columnas, de las cuales, dos tienen tamaño fijo. Three columns and one column with 100% and two columns with fixed width.

jsfiddle

CSS

div, span, label, li, ul
{
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.cabecera
{
    top:0px;
    left:0px;
    width:100%;
    height: 100px;
    display: table;
    position: absolute;
    border:1px solid orange; 
}
.row
{
    width:100%;
    display: table-row;
}

.column_izq
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;

    border:1px solid black;
}
.column_izq .icono
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}

.column_center
{
    width: 100%;
    min-width:60px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;

    border:1px solid black;
}
.column_der
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;

    vertical-align: middle;

    border:1px solid black;
}
.column_der .logo
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}