Responsive Div At The Center. Px Div In Each Side

I have different rows. Each one has a div on the left and one on the right. They must have 50px. At the center I need a div that must be responsive, it should adapt to the width of

Solution 1:

You can use width: calc(100% - 120px);

That means that the .center class will take the 100% with of the parent element, less 120px (50 for .right and .left elements and 10 for its margins).

For some reason in this snippet I had to set width: calc(100% - 128px);

#wrap {
	margin: 20px auto;
	width: 80%;
	background-color: red;
}

.row {
	height: 30px; margin-bottom: 10px; background-color: green;
}

.left,
.right {
	width: 50px; height: 30px; line-height: 30px;
	display: inline-block;
	text-align: center;
	background-color: grey;
}

.left { margin-right: 10px; }
.right { margin-left: 10px; }

.center {
	min-height: 30px; line-height: 30px;
	text-align: center;
	background-color: blue;
  display: inline-block;
  width: calc(100% - 128px);
}

<divid="wrap"><divclass="row"><divclass="left">left</div><divclass="center">center</div><divclass="right">right</div></div><divclass="row"><divclass="left">left</div><divclass="center">center</div><divclass="right">right</div></div></div>

Solution 2:

What are your exact browser support requirements? Flexbox is indeed the right tool for this job, and with a CSS pre- or post-processor (say, Autoprefixer) you can get support for every modern browser including the ones that need vendor-specific syntax for Flexbox (https://caniuse.com/#feat=flexbox).

If you require support for, say IE9, then you can use CSS @supports at-rules (https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) to target browsers that can't do Flexbox.