Transparent background on DIV

Question

Why does the inner DIV also become transparent when I use this code?
My plan was to have the text visible and transparent background.
Do I have to float the inner div over the transparent div?

You can see live demo here: http://jsfiddle.net/pBAf5/

HTML

<div class="openinghours floatRight">
  <div class="content">My test goes here</div>
</div>

CSS

.openinghours { 
  height: 70px;
  width: 300px;
  padding: 10px;
  font-size: 0.85em;
  background-color: #f6f6f6; 
  border: solid 1px #c7c7c7;
  margin-right: 20px;
  margin-top: 5px;
  opacity: .5;
  filter: alpha(opacity=50);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px; 
}

Answer 1

Use rgba or a transparent png, or move the inner text into a sibling node of the opacity div.

Answer 2

The opacity attribute will affect not only the parent div, but the children divs as well. To achieve the effect you desire, you need to use a transparent background on the parent div. This can be done by using RGBA for the background color of the parent div (not fully cross-browser) or by using a transparent PNG as the background image of the parent div.