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>