8

New to everything web-programming wise.

I'm trying to vertically align the two wrapper divs so that they are in the middle of the page, irrespective of the browser. The website can be found here: www.armedwithreason.com/massshooting

I've looked up dozens of tutorials on this very question, and cannot get anything to work. Any ideas?

Parseltongue
  • 11,157
  • 30
  • 95
  • 160
  • 2
    Put both in one div, and search for "vertically align one div" :) There really is plenty, plenty of stuff out there on that with a simple search, hold on.... – Pekka Sep 18 '13 at 12:16
  • Have a look [here for a cross-browser example implementation](http://stackoverflow.com/a/18746827/1846192) of centering an element both vertically and horizontally. – Mathijs Flietstra Sep 18 '13 at 12:21

1 Answers1

5

You've set width and height on those two div, then you can use this kind of code :

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -170px;
    margin-left: -300px;
}
.wrapper2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 150px;
    margin-left: -300px;
}

With top: 50%; left: 50%, you put the div's top-left corner in the middle, then you ajust its position with /positive/negative margins.

JsFiddle (a basic one with your own style)

zessx
  • 68,042
  • 28
  • 135
  • 158