Positioning of divs in center and right and left for any browser(cross-browser)
You can use CSS grid. I think I've understood your layout. Let me know if the example below is right.
main {
border: 1px solid;
display: grid;
grid-template-columns: minmax(200px, 300px) minmax(400px, 500px) minmax(200px, 300px);
grid-gap: 20px;
justify-content: center;
}
main>div {
background: yellow;
text-align: center;
padding: 1em;
}
.div-B {
grid-column: 2;
}<main>
<div class="panel div-A">Panel A </div>
<div class="panel div-B">Panel B </div>
<div class="panel div-C">Panel C </div>
</main>This can be done using flex:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
overflow: hidden;
}
.classA {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 200px;
max-width: 300px;
height: 200px;
width: 300px;
background-color: red;
}
.classB {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
min-width: 400px;
max-width: 500px;
width: 500px;
height: 200px;
margin-left: 20px;
margin-right: 20px;
background-color: yellow;
}
.classC {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 200px;
max-width: 300px;
height: 200px;
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="classA">A</div>
<div class="classB">B</div>
<div class="classC">C</div>
</div>
</body>
</html>