Hey there, I'm currently working on a project in MVC4. Within my Layout page, I have a transparent div (#wrapper) with several non-transparent divs stacked on top of it. Below is the CSS and HTML code I am using for this setup.
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
</div>
<div id="content">
@RenderBody()
</div>
</div>
CSS
#wrapper {
position:relative;}
#wrapper:before {
margin-left:12%;
width:76%;
background-color:#6c88b6;
content:'';
min-height:400px;
height:auto;
overflow:hidden;
position:absolute;
opacity:.5;}
#header {
position:relative;
}
#logo {
margin-left:3%;
margin-top:20px;
margin-bottom:20px;
display:inline-block;
height:70px;
width:300px;
background:url(../Shared/Images/logo.png) no-repeat center left ;
}
#navigation {
margin-left:1%;
width:98%;
background-color:#fff;
height:50px;
}
#content {
position:relative;
}
I am facing an issue where the inner divs within the wrapper (non-transparent divs) are not positioned correctly. They seem to be outside the wrapper. How can I adjust their positioning?