3 divs won't align in a horizontal row - html

Question

I've tried everything and looked at many relevant discussions on here but nothing has helped. I'm designing it through Dreamweaver and when I look at the design in D.W all 3 divs are in a row but in the ie browser the divs are in a column.
HTML
div class="container">
<div id="news" class="fluid">
<div align="center">News</div>
<div align="center">VOLUNTEERS THE HEART OF THE COMMUNITY<br>
Volunteers wanted in our three charity shops in Worthing. Read more..</div>
</div>
</div>
<div id="events" class="fluid">
<div align="center">"events"</div> </div>
<div id="newsletter" class="fluid">
<div align="center"></div>
</div>
</div>
CSS
.container {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
clear: none;
}
#news {
width: 32.2033%;
clear:none;
background-color: rgba(232,138,12,0.57);
}
#events {
clear:none;
display: inline-block;
margin: 0 auto;
width: 33.7288%;
background-color: rgba(20,18,241,1.57);
}
#newsletter {
background-color: rgba(16,203,225,1.57);
width: 20.2033%;
clear:none;
}
The url is http://www.worthingscope.org.uk/newindex.html
Any help would be great
Many thanks.

Answer 1

First, remove clear: none; wherever you have it; it's not doing anything useful. Second, as user j08691 mentioned, there are more than three divs here, so it's not 100% clear which ones you want aligned horizontally. I will assume it's the ones with .fluid as a class, however. So you can do something like this:
.fluid {
float: left;
}
JSFiddle Example