Opacity affecting all sub divs

So I basically have 2 divs and they are setup like this

<div id="header">
<div id="navbar">
</div>
</div>

Code (markup):

This is the CSS for the header and navbar:

#header

{

padding: 0px;

opacity: 0.25;

background-color: #dcddd8;

height: 100px;
width: auto;
vertical-align: middle;


}



#navbar {

  width: auto;
  height: auto;
  border: 1px solid #b9121b;
  vertical-align: middle;
  background: #d74b4b;
  position: relative;
  top: 35px;

}

Code (markup):

I want to know why all the content in my navbar is being affected by the opacity of the header. Can anyone help me fix this error. (I want the background of the header to be opaque but I want the navbar to retain its color)

 

That's what opacity does -- child elements are PART of the parent for the application of CSS. You make the parent transparent, it all is.

If all you're doing is a background color, I'd suggest using RGBA instead... with a non-alpha fallback for older browsers.

I'd also advise against fixing the height of the outer element, as well as using relative positioning to either do the parent element's padding or element itself's margin's job.

Of course, if that's ACTUALLY a navigation bar, it should probably be a UL, not a DIV -- but saying what the right markup should be without some example content is effectively impossible -- hence why CONTENT should be your starting point, not markup and CSS.

Also, div are automatically width and height auto -- not sure why you'd bother declaring those, much less that as a rule of thumb vertical align only effects inline-level elements relationships to each-other, not sure what that's doing in there either.

I'm guessing a bit wildly given the lack of content, but I suspect this is closer to what you "need"

#header {
	/*
		making a wild guess you'd have equal spacing on each side of the child
		instead of fixing the height
	*/
	padding:35px 0;
	background-color:#DCDDD8; /* for browsers that don't know rgba */
	background-color:rgba(220, 221, 212, 0.25);
}
 
#navbar {
  border: 1px solid #B9121B;
  background: #D74B4B;
}

Code (markup):

 

OR just put .png format image with lower opacity in header background.

 

Assuming you want to waste time on an extra handshake and the transfer time... This is 2014, not 1998.

 

You can do as you wish,I dont care...

p.s. *this is 2014, not 1998* means do it as fast as possible, no matter how it will look?!

 

If all we're talking is a solid color being made transparent, why would either method look different from each-other? In that case, use the faster one. (and if you REALLY need it in IE8-, use a filter).

:/

 

Helo, Here is Solution, Just Replace Your #header css with this:

#header
{
padding: 0px;
background-color:rgba(220,221,216,.25);

height: 100px;
width: auto;
vertical-align: middle;
}

Code (markup):

This is 100% Working Code, If you still face problem feel free to reply...

 

@Hafiz Kashif Asif -- isn't that what I said?

 

@deathshadow You absolutely 100% Right. I admit it, I just missed that...