Zoom in/out how do I keep the aspect ratio? - html

Question

Working Example: http://jsfiddle.net/4jmY2/4/
If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the same no matter what size?
HTML
<div class="check_box">
<div class="check">
<div class="your_name">Your Name</div>
<div class="bank_name">Your Bank Name</div>
<div class="check_number_top">1001</div>
<div class="your_address">Your Address</div>
<div class="bank_address">Bank Address</div>
<br />
<div class="date">Date ________</div>
<br />
<div class="pay">Pay to the<br />Order of _______________________________ $________</div>
<br />
<div class="pay_line">_________________________________________ Dollars</div>
<br />
<div class="sign">_____________________</div>
<br />
<div class="check_number_bottom">⑈<strong>1001</strong>⑈</div>
<div class="routing_number">⑆<strong>123456789</strong>⑆</div>
<div class="account_number"><strong>987 6543210</strong> ⑈</div>
</div>
</div>
CSS
.check_box {
width: 300px;
}
.check {
border: 2px solid #1A1B1B;
background-color: #DFE5E5;
height: 110px;
font-size:80%;
font-family: Georgia;
padding:0px;
margin: 0px;
}
.your_name {
float:left;
padding:0px 30px 0px 5px;
font-size:105%;
}
.your_address {
float:left;
padding:0px 40px 0px 5px;
font-size:85%;
}
.bank_name {
float:left;
padding:0px 30px 0px 5px;
font-size:105%;
}
.bank_address {
float:left;
padding:0px 30px 0px 5px;
font-size:85%;
}
.check_number_top {
float:left;
padding:0px 0px 0px 40px;
font-size:105%;
}
.date {
float:left;
padding:0px 0px 0px 220px;
font-size:85%;
}
.pay {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
}
.pay_line {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
}
.sign {
float:left;
padding:0px 0px 0px 165px;
font-size:85%;
}
.check_number_bottom {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number {
float:left;
padding:0px 0px 0px 5px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.account_number {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number_tip {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
color:#1F4CA5;
}
.account_number_tip {
float:left;
padding:0px 0px 0px 10px;
font-size:85%;
color:#1F4CA5;
}

Answer 1

Well, I finally had a go at doing this. I had to do it from scratch, and it took a while.
Live Demo
It looks like this for me:
Tested in IE7/8 plus recent versions of Firefox, Chrome, Safari, Opera.
You can zoom in!
If there's anything wrong or you have any questions, let me know.
HTML:
<div class="check_box">
<div class="check">
<span class="your_left"><em>Your Name</em><br />Your Address</span>
<span class="your_mid"><em>Your Bank Name</em><br />Bank Address</span>
<span class="your_right"><em>1001</em></span>
<span class="date">Date<span></span></span>
<span class="pay_to">Pay to the<br />Order of<span></span></span>
<span class="dollar"><br />$<span></span></span>
<span class="dollars"><span></span>Dollars</span>
<span class="extraline"><span></span></span>
<span class="numbers">
<span>⑈<b>1001</b>⑈</span>
<span>⑆<b>123456789</b>⑆</span>
<span><b>987 6543210</b> ⑈</span>
</span>
</div>
</div>
CSS:
.check_box {
font: 10px/1.3 Georgia, serif;
border: 2px solid #1a1b1b;
background-color: #dfe5e5;
width: 292px;
padding: 4px;
margin: 0
}
.check {
position: relative;
height: 102px
}
.check > span {
position: absolute
}
.check em {
font-size: 12px;
font-style: normal
}
.date span, .pay_to span, .dollar span, .dollars span, .extraline span {
border-bottom: 1px solid #000;
zoom: 1 /* fix ie7 */
}
.your_left {
top: 0; left: 0
}
.your_mid {
top: 0; left: 95px; text-align: center
}
.your_right {
top: 0; right: 0
}
.date {
top: 28px; right: 0
}
.date span {
padding-left: 50px;
margin: 2px 0 0 3px
}
.pay_to {
top: 35px; left: 0
}
.pay_to span {
padding-left: 180px;
margin-left: 3px
}
.dollar {
top: 35px; right: 0; text-align: right
}
.dollar span {
padding-left: 50px;
margin-left: 3px
}
.dollars {
top: 62px; left: 0
}
.dollars span {
padding-left: 250px;
margin-right: 3px
}
.extraline {
top: 76px; right: 0
}
.extraline span {
padding-left: 120px
}
.numbers {
bottom: 0; left: 0
}
.numbers span {
margin: 0 10px 0 0
}

Answer 2

Not sure that I understand your question. But when I zoom in, the text components scale up while the background "check" style does not.
It sounds like you want the check to scale up as well. If so, you might need to create em-driven div styles, which will scale with the browsers font selection.
Here's a good article with several examples.