positioning widgets
Is there a tool one can use to generate a layout like this?
.aw-system-control {position: absolute}
#box {left: 0px; top: 0px; width: 398px; height: 432px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#tabs {left: 6px; top: 6px; width: 386px; height: 22px;}
#frame {left: 6px; top: 28px; width: 386px; height: 362px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
#group1 {left: 21px; top: 40px; width: 357px; height: 100px;}
#label1 {left: 70px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 35px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 71px; top: 82px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 81px; width: 230px; height: 20px;}
#button1 {left: 112px; top: 108px; width: 82px;}
#button2 {left: 198px; top: 108px; width: 82px;}
#button3 {left: 284px; top: 108px; width: 82px;}
#group2 {left: 21px; top: 150px; width: 357px; height: 86px;}
#label4 {left: 70px; top: 167px; width: 310px; height: 28px;}
#label5 {left: 35px; top: 170px; width: 30px; height: 16px;}
#button4 {left: 95px; top: 204px; width: 95px;}
#button5 {left: 198px; top: 204px; width: 82px;}
#button6 {left: 284px; top: 204px; width: 82px;}
#group3 {left: 21px; top: 247px; width: 357px; height: 95px;}
#label6 {left: 70px; top: 265px; width: 310px; height: 28px;}
#label7 {left: 35px; top: 268px; width: 30px; height: 16px;}
#label8 {left: 71px; top: 305px; width: 150px; height: 16px;}
#input2 {left: 240px; top: 304px; width: 39px; height: 20px;}
#button7 {left: 284px; top: 302px; width: 82px;}
#button8 {left: 20px; top: 350px; width: 85px;}
#button9 {left: 111px; top: 350px; width: 85px;}
#button10{left: 202px; top: 350px; width: 85px;}
#button11{left: 293px; top: 350px; width: 85px;}
#button12{left: 154px; top: 400px; width: 75px;}
#button13{left: 236px; top: 400px; width: 75px;}
#button14{left: 318px; top: 400px; width: 75px;}
#label9 {left: 70px; top: 60px; width: 300px; height: 16px;}
.aw-system-control {position: absolute}
#box {left: 0px; top: 0px; width: 398px; height: 432px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#tabs {left: 6px; top: 6px; width: 386px; height: 22px;}
#frame {left: 6px; top: 28px; width: 386px; height: 362px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
#group1 {left: 21px; top: 40px; width: 357px; height: 100px;}
#label1 {left: 70px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 35px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 71px; top: 82px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 81px; width: 230px; height: 20px;}
#button1 {left: 112px; top: 108px; width: 82px;}
#button2 {left: 198px; top: 108px; width: 82px;}
#button3 {left: 284px; top: 108px; width: 82px;}
#group2 {left: 21px; top: 150px; width: 357px; height: 86px;}
#label4 {left: 70px; top: 167px; width: 310px; height: 28px;}
#label5 {left: 35px; top: 170px; width: 30px; height: 16px;}
#button4 {left: 95px; top: 204px; width: 95px;}
#button5 {left: 198px; top: 204px; width: 82px;}
#button6 {left: 284px; top: 204px; width: 82px;}
#group3 {left: 21px; top: 247px; width: 357px; height: 95px;}
#label6 {left: 70px; top: 265px; width: 310px; height: 28px;}
#label7 {left: 35px; top: 268px; width: 30px; height: 16px;}
#label8 {left: 71px; top: 305px; width: 150px; height: 16px;}
#input2 {left: 240px; top: 304px; width: 39px; height: 20px;}
#button7 {left: 284px; top: 302px; width: 82px;}
#button8 {left: 20px; top: 350px; width: 85px;}
#button9 {left: 111px; top: 350px; width: 85px;}
#button10{left: 202px; top: 350px; width: 85px;}
#button11{left: 293px; top: 350px; width: 85px;}
#button12{left: 154px; top: 400px; width: 75px;}
#button13{left: 236px; top: 400px; width: 75px;}
#button14{left: 318px; top: 400px; width: 75px;}
#label9 {left: 70px; top: 60px; width: 300px; height: 16px;}
kkeller@ign.com
May 7,