Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords
(e.g. turn on to find exact phrase “Demi Lovato thighs” rather than pages featuring “Demi”, “Lovato”, and “thighs” within but not necessarily exact phrase).

Center a layout using CSS positioning and negative margin

22nd July 2012

Page: prev. | 1 | 2 | next

Centering with Left property and negative margin

Setting the containers left property to 50% places the left edge of the container in the middle of the page. Then setting the margin-left property to half the containers width centers the container horizontally.

#outerContainer {Width:960px;left:50%;margin-left:-480px;}
/* Centered horizontally. */

The negative margin-left property can be increased to shift the container left the amount required, let's say 100 pixels left.

#outerContainer {Width:960px;left:50%;margin-left:-580px;}
/* Centered, then shifted left 100px. */

Centering with left set 50% and negative left margin allows the backdrop to slide off-screen
Centering with left set 50% and negative left margin allowed the backdrop to slide off-screen giving more space for the content.

The negative left margin will allowed the backdrop in the outer container to slide off-screen and the content inner frame to shift nearer to the left edge when the browser window is smaller than outer containers width.

Here's the CSS.

Line
  1. <!--
  2. __outerContainer______________
  3. |                            |
  4. |    _______________________ |
  5. |    |innerContainer       | |
  6. |    | article             | |
  7. |    |   header            | |
  8. |    |     nav             | |
  9. |    |                     | |
  10. |    |                     | |
  11. |    |      [content]      | |
  12. |    |                     | |
  13. |    |                     | |
  14. |    |   footer            | |
  15. |    |_____________________| |
  16. |                            |
  17. |____________________________|
  18. -->

  19. <style type="text/css">

  20. #outerContainer {
  21.   position:absolute;
  22.   width:960px;
  23.   height:750px;
  24.   top:0;
  25.   left:50%;
  26.   margin-left:-580px;
  27. /* half width plus left shift required. */
  28.   text-align:left;
  29.   background:url(images/facade.jpg) no-repeat center top;
  30.   z-index:0;}
  31. /* Positions the box center but with a 100px shift to the
  32.   left, the negative margin allowing background image to
  33.   slide offscreen while the innerContainer division within
  34.   is still visible if browser window is smaller than box
  35.   width.
  36.   Height is set to ensure whole of background image is
  37.   shown vertically if innerContainer division does not
  38.   extend to that height.*/

  39. #innerContainer {
  40. margin-top:150px;
  41. margin-left:385px;
  42. width:520px;}
  43. /* Box for content. Margins set box down and to the left
  44.   of innerContainer division. */

  45. </style>

Page: prev. | 1 | 2 | next

Tags: center, CSS, layout, negative margin, positioning