Cách design website có số box là lẽ

Có thể nhiều người không để ý rằng khi zoom nhỏ 1 trang web, các box sẽ bị rớt xuống, không còn giống hình dạng ban đầu khi xem bình thường.

Mặc dù điều này chỉ xuất hiện khi zoom < 100 mà thực tế người dùng thường zoom > 100 % để dễ nhìn.

Tuy nhiên với một design chuyên nghiệp thì không nên có điều này.

code khi bình thường, nhiều người sẽ viết:

<style>
.box{width:600px;}
.box-0{width:200px;float:left;}
</style>
<div class="box">
<div class="box-0">...</div><div class="box-0">...</div><div class="box-0">...</div>
</div>

cụ thể sẽ xảy ra trường hợp như hình sau:

Vậy chúng ta có thể viết một cách "chắc ăn" mà đơn giản như "ngày còn bé": 

<table>
<tr>
<td><div class="box-1">...</div></td>
<td><div class="box-2">...</div></td>
<td><div class="box-3">...</div></td>
</tr>
</table>

Nhưng dùng TABLE thì có vẻ không "chuyên nghiệp" lắm, chúng ta nên viết:

 <style>
.box{width:600px;}
.box01,box03 {width:33%; float:left; margin:0; pidding:0;} /* nếu gộp cả 3 cái class thì có thể viết width:33.3% */
.box02 {width:34%; float:left; margin:5px; pidding:5px;}
.box-1,box-2,box-3 {} /*Nếu giống nhau thì bạn gộp chúng thành 1*/
</style>
<div class="box">
<div class="box01"> <div class="box-1">...</div> </div>
<div class="box02"> <div class="box-2">...</div> </div>
<div class="box03"> <div class="box-3">...</div> </div>
</div>