Asp.net 在每个屏幕分辨率上并排显示

我用Html和CSS创建了一个简单的布局，如下所示：

CSS

.search-box{border:1px solid gray;padding:
5px;border-right:5px solid gray;padding-right:30px;
width:60%;font-size:14px;}

.search-box:focus{outline:none;}

.search-buton{background-color:gray; 
border:1px solid gray;padding:5px;font-size:14px;
cursor:pointer;color:#fff;width:10%;}

.search-buton:hover{background-color:#575E5B;border:1px solid #575E5B;}

.left{float:left; border:1px solid gray; width:68%;padding:10px;}

.right{float:right; border:1px solid gray;width:28%;padding:10px;}

HTML

  <div class="right">
      <input class="search-box" type="text" placeholder="ASP.NET MVC, JQuery, Ajax, etc." />
      <input class="search-buton" type="submit" value="Search" />
  </div>
  <div class="left">

  </div>    
  <div style="clear:both;"></div>

请参阅JSFIDLE示例：

正如你所看到的，我无法顺利地看到他们。一些屏幕分辨率，这是完美的。但当我放大浏览器内部时，事情就变得一团糟了

我想用CSS3媒体查询来解决这个问题，但我确信有一些CSS技巧可以解决这个问题。有什么想法吗

顺便说一句，任何关于这个问题的标题的建议都是很好的。它是 我觉得没那么有创意

---

你可以这样写：

  .left{
   border:1px solid gray;
   padding:10px;
   overflow:hidden;
   padding: 10px;
  }

 .right{
  float:right; 
  border:1px solid gray;
  width:28%;
  padding:10px;
  margin-left:20px
 }

---

选中此项

您还需要使用填充百分比，因为这会影响总宽度

下面是一个例子：

这解释了长方体模型：