Question

Right I want to have some divs, where everything inside them has a certain opacity, yet the border of the div is normal. Now I know when you set an opacity to a div, it applies it to everything.

So. I have tried splitting them into two divs like this:

<div id="border">
<div class="content">
hello
</div>
</div>

with

#border{
border: 1px solid #000;
}

.content{
opacity:0.1;
}

This gives the opacity I want, but it doesnt have the right height or width. I dont want to define a width in #border (i have random sizes) It seems to make it full screen width and 0px high.

Alternatively, does anyone have any alternative methods?

Thanks

Answer 1

Yes, use:

#border{ display: inline-block; }

also remove any declaration of width or height for #border or set them to auto

DEMO