Jis0 Jis0 - 6 months ago 18
CSS Question

Two divs side by side inside wrapper

I am trying to place two divs side by side with 20px margin between them. Divs are inside wrapper, which width is 800px. Left div is 250px and right div is 550px, but of course if I add 20px margin between them, total width is increasing over 800px. Is there any way to force right div width to be 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 do I have to decrease width manually or is there any better solutions?

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

Answer

Yes you can use calc(550px - 20px) as 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>