div push down at center it right away - html

Question

How do i push my content down once i do (ctrl + mouse scroll) to zoom in , and the content center it self right away.
So i have #div left #div right both beside each other, and once it zooms, #div left will push down #div right ,and #div right will center it self right away.
Here is my jsfiddle sorry please copy and paste http://jsfiddle.net/Tedeee/bBpEm/
HTML
<div id="top">
<br />
hi
</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div {
outline: red 1px solid
}
#right {
width: 200px;
height: 200px;
float:left;
background-color:red;
}
#left {
width: 200px;
height: 200px;
float:left;
background-color:grey;
}
#outer {
float:left;
clear:both;
text-align: center;
}
Sample website
Try look at the home-section https://coderwall.com/welcome
As you can see once my div got pushed down the # right div wont move to center.
and also i need to center it once it is pushed down.
How do i do this, i really need help. Thanks.

Answer 1

Try displaying your divs as inline-block.
Updated JSFiddle
This comes with some caveats. inline-block elements will have whitespace surrounding them, and there are fixes for that. My preferred method is to add margin-right: -0.36em; to the inline-block elements. There are other fixes you can look up too.
Basic structure is as follows:
HTML
<div id="top"> <br />hi</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div { outline: red 1px solid }
#outer {
text-align: center;
}
#right {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
#left {
width: 200px;
height: 200px;
display: inline-block;
background-color:grey;
}