My webpage consists of three elements. The main element is centered with a beautiful background image, while overlayed on top of it is a second div with a black semi-transparent background to enhance text readability.
In addition, there is a floating div with a solid white background.
However, I have noticed that when the floating div overlaps the semi-transparent div, the black background bleeds through into the float.
I have included my HTML + CSS code below to illustrate this issue. If you resize your browser window, the right floating div will move towards the center div and be affected by the transparency issue.
Any insights or solutions would be greatly appreciated.
<!doctype html>
<head>
<style type="text/css">
#centerDiv {
height: 300px;
width: 900px;
margin: 0px auto 0px auto;
padding: 0 0;
background-color: green;
}
#centerInset {
width: 100%;
background-color: rgba(0,0,0,0.3);
position: relative;
top: 225px;
height: 74px;
color: white;
}
#floater {
float: right;
width: 200px;
height: 300px;
border: 1px solid;
clear: both;
background-color: rgba(250,0,0,1);
border: 1px solid black;
}
</style>
</head>
<body>
<div id="floater">
<span>some floating text</span>
</div>
<div id="centerDiv">
<div id="centerInset"><span>Some random text</span></div>
</div>
</body>
</html>