html - Two divs side by side inside wrapper -


i trying place 2 divs side side 20px margin between them. divs inside wrapper, width 800px. left div 250px , right div 550px, of course if add 20px margin between them, total width increasing on 800px. there way force right div width 550px - 20px margin?

css

.wrapper {     max-width: 800px;     height: 400px;     background-color: green;     margin: 0 auto; }  .left {     width: 250px;     height: 300px;     background-color: blue;     float: left;     margin-right: 20px; }  .right {     width: 550px;     height: 300px;     background-color: red;     float: left; } 

html

<body>     <div class="wrapper">         <div class="left">         </div>          <div class="right">         </div>     </div> </body> 

i mean have decrease width manually or there better solutions?

jsfiddle: https://jsfiddle.net/ytsvd77f/

yes can use calc(550px - 20px) width of right div.

.wrapper {    max-width: 800px;    height: 400px;    background-color: green;    margin: 0 auto;  }  .left {    width: 250px;    height: 300px;    background-color: blue;    float: left;    margin-right: 20px;  }  .right {    width: -moz-calc(550px - 20px);    width: -webkit-calc(550px - 20px);    width: -o-calc(550px - 20px);    width: calc(550px - 20px);    height: 300px;    background-color: red;    float: left;  }
<div class="wrapper">    <div class="left"></div>    <div class="right"></div>  </div>


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo