html - レスポンシブ CSS / インライン div

Question

私は CSS を使用し100% width divてページ全体に a を配置し、次にそのdiv2の下にそれぞれすべてのdivsinlineを配置し、ページが小さくなると 2 つの s を次のように変更しようとしています。50%10px paddingdiv50% div100%

ここに私がこれまでに持っているものがあります:

<style type="text/css">
body,html {
    margin:0;
    padding:0;
}
.outer {
    width:100%;
}
.topblock {
    width:100%;
    padding:10px;
    border:1px solid black;
}
.block1 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
.block2 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
</style>

HTML:

<div class="outer">

<div class="topblock">
tickets
</div>

<div class="block1">
service orders
</div>

<div class="block2">
tickets 2
</div>

</div>

これを行う最良の方法は何ですか？

ここにもフィドルがあります：http://jsfiddle.net/dd6Wb/