如何使UI(用户界面)响应所有宽度

我在google后做了一个UI，但是我的UI没有响应，当我增加或减少窗口大小时它看起来不太好。

这是我的小提琴http://jsfiddle.net/X8HV9/1/show/我只有两个问题

1. "向上水平"按钮，它看起来很好，当窗口大小更多(全屏)。当我减小窗口的大小时，它会改变它的位置。但是next和previous按钮看起来不错。
2. 当你点击"添加"按钮，它显示弹出屏幕时，屏幕尺寸更多(全屏)。但是当屏幕变小时它会隐藏。

我可以给宽度%吗?

<div data-role="page" id="home">
    <div class="main_cont">
        <div class="cb"></div>
        <section>
            <div class="contentbox">
                <div class="actionbar">
                    <a href="#" class="home" id="home_h"></a><a href="#" class="previous" id="previous_h"><i
                    class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
                    class="iconnext"></i>Next</a>
                    <a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
                    <div class="cb"></div>
                </div>
            </div>
        </section>
        <footer id="firstPageFooter">
            <button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>
        </footer>

        <div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <div data-role="fieldcontain">
                <label for="testCaseIDValue">Test Case ID:</label>
                <input type="text" name="testCaseIDValue" id="testCaseIDValue" value=""  class="inputTextTestCase"/>
            </div>
            <a href="#" data-role="button" id="donePopUp">Done</a>
        </div>
    </div>

谢谢

#next_h{
   position:absolute;
   width:10%;
}

if($(window).outerWidth() < 500){
  $('#next_h).css({
    'position':'absolute',
    'width':'80%',
    'height':'10px'
  });
}