Having trouble centering two divs that are set to "display: inline-block;" in your code? Removing the inline-block class centers them, but they end up stacking vertically instead of horizontally. See below for an example:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
Here is the HTML structure:
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
This arrangement results in the following layout: