Question

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 { width: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>

Answer 1

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