Centering two boxes on resize

Question

I'm wondering if anyone has advice on how best to force two divs to center when a page is resized.

Here is the relevant html:

<div id="body">
    <div id="top"></div>
    <div id="content">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
   <div id="footer"></div>
</div>

I generally want the box 1 and box 2 divs to be aligned to the left and right of each other. So I use the following CSS:

#box1, #box2
    {
        float:left;
        max-width:25em;
        min-width:20em;
        width:45%;
    }

The issue I am trying to resolve is how to best get them to stack and then center if the page is resized. The desired look is:

I know I an use a media query like this:

@media screen and (max-width: 800px)
    { 
        #box1, #box2
            {
                /* SOMETHING */
            }
    }

Answer 1

The following should be put inside your media query:

• To stop them stacking next to each other you need to remove float: left;. This is because divs are block elements and will automatically move to a new line
• You are giving the divs width so adding margin: 0 auto; will enable them to be centered

#box1 {
  background-color: red;
}
#box2 {
  background-color: blue;
}
#box1, #box2 {
  float: left;
  max-width: 25em;
  min-width: 20em;
  width: 45%;
}
@media screen and (max-width: 800px) {
  #box1, #box2 {
    float: none;
    margin: 0 auto;
    max-width: 25em;
    min-width: 20em;
    width: 45%;
  }
}

<div id="box1">Box 1</div>
<div id="box2">Box 2</div>