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>
<div class="container">
all page elements.....
</div>
</body>
CSS:
container{
margin:0 auto;
width:80%;
}
Solution 2:
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/
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"