Problème d'inline-block CSS

Bonjour à tous !

J'ai un problème avec mon code : http://image.noelshack.com/fichiers/2014/09/1393357082-prob-css.png


Le voici :

<div class="bloc1"><div class="titre1">
  <img src="http://image.noelshack.com/fichiers/2014/09/1393352314-journal1.gif" /> News  
</div>
  * XX/XX/XX : Info récente <br />
  * XX/XX/XX : Info moins récente <br />
  * XX/XX/XX : Info ancienne <br />
</div><div class="bloc1"><div class="titre1">
  <img src="http://image.noelshack.com/fichiers/2014/09/1393352314-icone-coupe.gif" /> Animations  
</div>
  * Du XX/XX/XX au XX/XX/XX : Concours récent <br />
  * Du XX/XX/XX au XX/XX/XX : Concours moins récent <br />
  * XX/XX/XX au XX/XX/XX : Concours ancien <br />
</div><div class="bloc2"><div class="titre1">
  <img src="http://image.noelshack.com/fichiers/2014/09/1393352314-journal1.gif" /> <span style="transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* Internet Explorer */-moz-transform:rotate(-90deg); /* Firefox */-webkit-transform:rotate(-90deg); /* Safari et Chrome */ -o-transform:rotate(-90deg); /* Opera */">Top-sites</span> <span style="transform:rotate(20deg); -ms-transform:rotate(20deg); /* Internet Explorer */-moz-transform:rotate(20deg); /* Firefox */-webkit-transform:rotate(20deg); /* Safari et Chrome */ -o-transform:rotate(20deg); /* Opera *">et</span> Partenaires  
</div>
  * XX/XX/XX : Info récente <br />
  * XX/XX/XX : Info moins récente <br />
  * XX/XX/XX : Info ancienne <br />
</div>






<style>
.bloc1 {
display:inline-block;
height:300px;
width:200px;
padding:5px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
background-color:#F7D2F2;
border:1px solid #6F6FEB;
margin-right:10px;
}
 
.bloc2 {
display:inline-block;
height:150px;
width:505px;
padding:5px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
background-color:#F7D2F2;
border:1px solid #6F6FEB; 
}

.titre1 {
font-family:'Allura', cursive;
color:#6F6FEB;
font-size:40px;
text-align:center;
text-shadow:1px 1px 1px black;
border-bottom:1px solid #6F6FEB;
}
  
img {
margin-bottom:-8px;
}
  
  
  
  
</style>

J'aimerais que les deux premiers div soient alignés horizontalement.

Quelqu'un pour m'aider ?

Merci :)

EDIT : Et accessoirement, les rotate ne marchent que sous IE, quelqu'un aurai la soluce ? :/