CSS FOR PLACING MULTIPLE DIVS SIDE-BY-SIDE OR ONE-ABOVE-OTHER IN A RESPONSIVE DESIGN TO MATCH DIFFERENT SCREEN SIZES

   The greatest achievement of any science is to accomplish the most complicated things in the most cool and easy ways.    Here, we are considering four divs. They must fulfill following conditions:

   a. The arrangement should occur in the middle of the page.

   b. They must accommodate themselves on various screen sizes like mobile phones, tablets and laptops.

   c. They should be able to be arranged horizontally (side-by-side) as well as vertically (one-above-the-other)

   d. The html should apply to any number of divs

   Initially, I was able to achieve this after too much eye training and backbreaking efforts with a combination of 'float: left and media query' in the CSS. It was a near-perfect solution, but still not perfect. It was like going from London to Moscow via Sydney. Here, I will present a solution, much simpler than all the solutions described elsewhere and I think, there can be no easier way than this.

  
  Step-1
    

  By default, the basic CSS puts the divs one-above-the-other aligning them on the left side of the visible element. This is the basic html for the 4 different divs with different colors.

  This is the basic html for the 4 different divs a, b, c, d with different colors. 


  By default, the basic CSS puts the divs one-above-the-other aligning them on the left side of the visible element. 


  Step-2
   
   Each of these divs is a separate unit. Now let's add the property 'display: inline-block' into each div so that all these divs will be linked together like the carriages of a train or consider them like birds of the same flock where individual members may change their positions but won't leave the group.

  Step-3
   

   Now, let's put all these birds into one cage by applying a 'div id' to all four, so that any action applied to the cage will be automatically applicable to all of the accommodated individuals. Not to mention, the div id may not be visible on a white background as we have not applied the border tag to it.
The html will now look like –

  Step-4

   

   This is the final and very crucial step. Add align= "middle" (or align= "center" both mean the same) tag next to the id.
That's it! Now check the position of all the divs across different resolutions.

   
   THE FINAL OUTCOME


   On the small mobile phone where the screen is < 300 pixels, the colored divs will look like this. 

   On the regular mobile or iPhone where the width is between 300 and 450 pixels, the arrangement will look like this. 

   On the tablet where the width is around 500 or 600 pixels, these divs will appear as: 

   On the laptops where the screens are always >600 pixels wide, the divs will stage themselves as:

* If you are watching this on your mobile screen, you may not get the full view.
  
Tip: You can replace align= "middle" with style="left: 50%; position: absolute;" or style="margin: auto; width: 75%;" to achieve almost the same results. 

  Also read this Great time & Money saver: A STEP-BY-STEP GUIDE TO FIX COMMON PROBLEMS AND ERRORS IN WINDOWS 10

DEALS OF THE DAY: AMAZON U.S.

FASHION, MUSIC, BOOKS, COSMETICS,
GIFTS, HEALTH, KITCHENWARE, SHOES

DEALS OF THE DAY: AMAZON INDIA

BEAUTY, WATCHES, JEWELLERY, CLOTHES,
ELECTRONICS, ORGANIC HEALTH PRODUCTS