Suppose there are 2 nested divas

<div id="wrapper"><div id="center"></div></div>
  • #wrapper takes up the whole screen
  • #center inside it, and should have the same indentation on both sides of it, even when the screen is reduced or enlarged

How can I make a #center div #center that it occupies the middle in #wrapper , having (2 times less width) at the same time so that it has the same indents from #wrapper .

In short, if it will be easier, go to Facebook and there with div class gradientContent. How to do also?

  • #center {margin: 0px auto; } // everything is simple! - Palmervan

1 answer 1

 #center { width: 50%; margin: 0 auto; }

It works only if #center has a known (specified) width.

Otherwise, something like this :

 #wrapper { float: left; position: relative; left: 50%; } #center { float: left; position: relative; left: -50%; } #center::after { content: " "; display: block; height: 0; visibility: hidden; clear: both; }