CODEWITHSUNDEEP
asp.nethtmlcss
tugberk
tugberk

Reputation: 58484

Side by side on every screen resolution

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.

Upvotes: 0

Views: 154

Answers (2)

sandeep
sandeep

Reputation: 92813

you can write like this :

  .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
 }

check this http://jsfiddle.net/sandeep/uuVuW/3/

Upvotes: 0

Dave Taylor
Dave Taylor

Reputation: 2045

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

Upvotes: 2

Related Questions