Friday, 19 October 2018

Positioning of divs in center and right and left for all browsers

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



from Positioning of divs in center and right and left for all browsers

No comments:

Post a Comment