Positioning of divs in center and right and left for any browser(cross-browser)

Question

Three div panels:-
1) (div-B) one div with max-width = 500px and min-width=400px should always on 
    the center of all browsers.
2) (div-A) one div should show and hide on the left of (div-B) having min-width 
   = 200px and max-width= 300px;
3) (div-C) one div should show and hide on the right of (div-B) having min-width 
   = 200px and max-width= 300px;

The show and Hide of div-A and div-C should be in such a way it should not move div-B from its position, however, it can attain its max-width and min-width available. div-B should always be in center of all browsers.

Layout of page:-

Header
<--Left button here                                       right button here-->
to open div-A panel                                       to open div-c panel
(basically a dropdown)                                  (basically a dropdown)


         Left Panel <---20px---> Center Panel <---20px---> Right Panel   
         (div-A)                  (div-B)                     (div-C)    

1) (div-A && div-B), (div-B && div-C) having margin 20px in between always.
   div-A should grow towards left and div-c should grow towards right relative to div-B(min-width and 
   max-width availability).
2) div-B should not move to right or left when div-A and div-C should hide. 
 But div-B should grow towards its left or right keeping div-B fixed to 
  center of browser window and tries to achieve its max-width(keeping center 
 axis fixed) if space available towards right or left.

<header>
//show hide button for div-A
<div class="div-A-button">Dropdown button A</div>
//show hide button for div-C
<div class="div-C-button">Dropdown button C</div>
</header>

<main>
<div class="panel div-A">Panel A </div>  //show and hide using div-A-button
<div class="panel div-B">Panel B </div>  //fixed always show
<div class="panel div-C">Panel C </div>  //show and hide using div-C-button
</main>

Here is stackblitz link: https://stackblitz.com/edit/angular-tpj35u?file=src%2Fapp%2Fapp.component.html

Fawaz · Accepted Answer

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>

sol · Answer

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>

Gerrit Halfmann · Answer

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:block to visibility:hidden, so the free space is still blocked to div-B
For better visual understanding I added a red border to the .panel container

Checkout the example in fullscreen, to see that .div-B is 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>

T. Shashwat · Answer

You can fix the width using The minmax() CSS function and to hide a div such that centre div remains in center of page use visibility : hidden property of css this will only hide it from page but will keep it in DOM and so the center div will not be affected if either of two divs on side gets hide on click

working code

<div id="container">
    <div (click)="visibility = !visibility" [ngClass]="{'hide' : visibility}">
     <select style="width :-webkit-fill-available;"></select>
      at most 300 pixels
    </div>
    <div>20px</div> //separator
    <div>
    <div style="position:absolute">
      Item with 400 to max 500px width
    </div>
  </div>
    <div>20px</div>    //separator
    <div  (click)="visibility1 = !visibility1" [ngClass]="{'hide' : visibility}">
        at most 300 pixels.
    </div>
  </div>

css

#container {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 20px minmax(400px, 500px) 20px minmax(200px, 300px);
  box-sizing: border-box;
  height: 200px;
  background-color: #8cffa0;
  width: 100%;
}

#container > div {
  background-color: #8ca0ff;
  border: 1px dotted red;
 }
 .hide {
   visibility: hidden;
 }

Positioning of divs in center and right and left for any browser(cross-browser)

Tags:

html

css

angular

flexbox

angular6

Layout of page:-

Manzer

4 Answers

Fawaz

sol

Gerrit Halfmann

T. Shashwat

Recent Activity

Donate For Us

Positioning of divs in center and right and left for any browser(cross-browser)

Tags:

html

css

angular

flexbox

angular6

Layout of page:-

Manzer

4 Answers

Fawaz

sol

Gerrit Halfmann

T. Shashwat

Related questions

Recent Activity

Donate For Us