How to make a 3 column layout fill 100% width?
jsFidd开发者_运维知识库le: http://jsfiddle.net/mYkjQ/
How do I make div2 + Button2 fill the rest of the window width?
Thank you.
CSS
td { border:solid 1px #000; float:left; }
#div1 { width:30%; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:30%; 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>
The usual way to do it is to float all 3 div-s to left, and remove the border because on some browsers it would break because of that 1 pixel.
If you really need the border then do this:
<style type="text/css">
#div1, #div3 { float:left; width:30%; }
#div2 { float:left; width:40%; }
#subdiv1, #subdiv2, #subdiv3 { border:solid 1px #000; }
#Button1, #Button2, #Button3 { width:100% }
</style>
<div id="div1">
<div id="subdiv1">
<button id="Button1">Button 1</button>
</div>
</div>
<div id="div2">
<div id="subdiv2">
<button id="Button2">Button 2</button>
</div>
</div>
<div id="div3">
<div id="subdiv3">
<button id="Button3">Button 3</button>
</div>
</div>
Edit1: jsfiddle for testing -> change the wrapper width to see that is scales to any width without breaking ...
#div2 { border:solid 1px #000; float:left; width:40%; }
set width:40% to div2, don't forget to remove the border
Check it out : http://jsfiddle.net/thilakar/mYkjQ/3/
I have done with approx calculation. i hope this may useful for you
HTML:
<div id="div1">
<button id="Button1">Button 1</button>
</div>
<div id="div2">
<div id="div2a">
<button id="Button2">Button 2</button>
</div>
<div id="div2b">
<button id="Button3">Button 3</button>
</div>
</div>
CSS:
#div1 { width:30%; border:solid 1px #000; float:left; }
#div2 { margin-left: 30.3% }
#div2a { width:49.3%; border:solid 1px #000; float: left }
#div2b { width:49.3%; border:solid 1px #000; float:right; }
#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }
精彩评论