Skip to content Skip to sidebar Skip to footer

Reducing The Space Equally When Resizing Browser Window

When resizing the browser window the browser just reduces the space after the element. I want to decrease the space equally on the left and right as it is done in Facebook. Here is

Solution 1:

Just give width 80% to your body and give margin-left and margin-right to auto for center aligning

body{
      margin:0 auto;
      width:80%;
    }

suggestion:

To give styles to body is not a good practice, give styles to top parent div in your page

like this,

<body><divclass="container">
       all page elements.....
</div></body>

CSS:

container{
          margin:0 auto;
          width:80%;
        }

Solution 2:

Solution 3:

What's the problem with

width: 50em;
max-width: 95%;
margin: 0 auto;

as it is suggested so many times on the web to display a centered wrapper, that shrinks and expands with the browser window and equal spaces left and right…

Post a Comment for "Reducing The Space Equally When Resizing Browser Window"