0

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.

L84
  • 45,514
  • 58
  • 177
  • 257
harikrishnan.n0077
  • 1,927
  • 4
  • 21
  • 27
  • The body shouldn't have a margin, as there would be not visible element left, to hold the background, when you shrink the body (by increasing it's margins). – feeela Nov 23 '12 at 09:32

3 Answers3

2

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%;
        }
Dhamu
  • 1,694
  • 5
  • 22
  • 47
  • If your problem solved, please click the accepted answer, For Users t know which is correct answer... @harikrishnan.n0077 – Dhamu Nov 23 '12 at 09:41
1

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/

Dziad Borowy
  • 12,368
  • 4
  • 41
  • 53
1

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…

feeela
  • 29,399
  • 7
  • 59
  • 71