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>
Ok, as far as I understood your Problem the container div-B should always be centered, regardless from div-A odr div-B. I change two major things:
- I updated the styles to flexbox which has a very good browser support so far.
- Changed the hide class from
display:blocktovisibility:hidden, so the free space is still blocked todiv-B - For better visual understanding I added a red border to the
.panelcontainer
Checkout the example in fullscreen, to see that
.div-Bis flexible
$(".pull-left").click(function() { $(".div-A").toggleClass("hide")});$(".pull-right").click(function() { $(".div-C").toggleClass("hide")});p { font-family: Lato;}.show { display: block;}.hide { visibility: hidden;}header { height: 40px;}div.pull-left { float: left; width: 100px; display: block; color: red; text-align: center; border: 1px solid #ccc;}div.pull-right { float: right; width: 100px; text-align: center; border: 1px solid #ccc;}.row { display: flex; justify-content: space-between; align-items: center;}.row .panel { border: 1px solid red; flex: 0 0 200px;}.row .panel.div-B { flex: 1;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- <hello name="{{ name }}"></hello> --><header> <div class="pull-left" (click)='showHide("A")'>button-div-A</div> <div class="pull-right" (click)='showHide("C")'>button-div-C</div></header><main> <div class="row"> <div class="panel div-A">Panel A </div> <div class="panel div-B">Panel B</div> <div class="panel div-C">Panel C </div> </div></main>