Question

I have created a simple layout with Html and CSS which is like below :

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>

See the JSFiddle sample :

http://jsfiddle.net/tugberk/uuVuW/

As you can see, I am unable to see them smoothly. Some screen resolutions, it is perfect. But when I zoom in inside the browser, it is where the things get messy.

I thought about fixing this with CSS3 media queries but I am sure there is some CSS trick which solve this problem for me. Any thoughts?

BTW, Any suggestion for the title of this question would be great. It is
not so creative I think.

Answer 1

You need to use percentages for the padding as well because this affects the overall width

Here’s an example:
http://jsfiddle.net/uuVuW/2/

This explains the box model:
http://www.w3.org/TR/CSS2/box.html