Attempting to align two divs side-by-side and centered within a wrapper div has proven to be a challenge. While my current method involves centering the wrapper contents and displaying them as inline blocks, this approach does not function properly in IE7. I have included a JS fiddle with a basic example for reference. Is there a workaround to achieve this layout in IE7?
JSFiddle Example: http://jsfiddle.net/QDn6T/
HTML Code:
<div id="wrapper">
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</div>
CSS Styling:
#wrapper{
height:800px;
text-align:center;
background-color:orange
}
#div1{
background-color:green;
width:100px;
display:inline-block;
}
#div2{
background-color:blue;
width:100px;
display:inline-block;
}