CODEWITHSUNDEEP
javascriptjqueryhtmlcss
harikrishnan.n0077
harikrishnan.n0077

Reputation: 2067

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 my code

CSS:

body{
     margin-left:10%;
     margin-right:10%;
}

HTML:

<body>
Some content
.
.
.
.
</body>

First I thought of giving a min-width to body. But computers having less screen size will be a problem. Also min-width will not be good solution.

Upvotes: 0

Views: 5147

Answers (3)

Dhamu
Dhamu

Reputation: 1752

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>
<div class="container">
       all page elements.....
</div>
</body>

CSS:

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

Upvotes: 2

feeela
feeela

Reputation: 29932

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…

Upvotes: 1

Dziad Borowy
Dziad Borowy

Reputation: 12589

Have you considered media queries? https://developer.mozilla.org/en-US/docs/CSS/Media_queries

here's a demo: http://playground.johanbrook.com/css/mediaquerydebug.html

and another good article: http://css-tricks.com/css-media-queries/

Upvotes: 1

Related Questions