By the whole width, you mean the whole page? if that’s what you want then
.shadow{background-color: rgba(0, 255, 0, 0.25); width:100%;position:absolute}
is what you’re looking for
Edit: Oh, and don’t forget to add width:100% to the other elements too
For the div fit the entire page you need to clean the default margin given by brower, use this css.
Css:
.shadow{
background-color: rgba(0, 255, 0, 0.25);
width: 100%; //this way its not fitting the entire page cause still have margin by default.
margin: 0px;
}
Hope I helped!
The actual accepted answer is incorrect btw.
I think you can do like this
.main .container{
margin: auto;
width:100%;
display: table;
}
.main .main-inner{
display: table-cell;
vertical-align: middle;
height: 100vh;
text-align: center;
}
.shadow{
background-color: rgba(0, 255, 0, 0.25);
}<section class="main">
<div class="container">
<div class="main-inner">
<div class="shadow">
<img src="images/broadhurst.gif" alt="" class="logo-img">
<ul>
<li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>//
<li><a href="#">Demand Calculator</a></li>//
<li><a href="clock.html">The Clock</a></li>
</ul>
</div>
</div>
</div>
</section> .main .container{
margin: auto;
display: table;
}
.main .main-inner{
display: table-cell;
vertical-align: middle;
height: 100vh;
text-align: center;
}
.shadow{
background-color: rgba(0, 255, 0, 0.25);
position: absolute;
transform: translate(-50%,-50%);
width: 100%;
}<section class="main">
<div class="container">
<div class="main-inner">
<div class="shadow">
<img src="images/broadhurst.gif" alt="" class="logo-img">
<ul>
<li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>//
<li><a href="#">Demand Calculator</a></li>//
<li><a href="clock.html">The Clock</a></li>
</ul>
</div>
</div>
</div>
</section> Do you need “display:table” in your main container?
If not, then it’s pretty simple. If you require “display:table”, then please let me know, will check more then.
.main .container {
display: block;
}
.main .main-inner {
vertical-align: middle;
height: 100vh;
text-align: center;
}
.shadow{
background-color: rgba(0, 255, 0, 0.25);
}
by adding width: 100%; into your .shadow class it will be full size
aslo you can play around with height too to fit it.
I want to make the div with class “.shadow” fit the whole width. But I am unable to figure it out. The code I am using is given bellow.
.main .container{
margin: auto;
display: table;
}
.main .main-inner{
display: table-cell;
vertical-align: middle;
height: 100vh;
text-align: center;
}
.shadow{
background-color: rgba(0, 255, 0, 0.25);
}<section class="main">
<div class="container">
<div class="main-inner">
<div class="shadow">
<img src="images/broadhurst.gif" alt="" class="logo-img">
<ul>
<li><a href="glenn-broadhurst.html">Glenn Broadhurst</a></li>//
<li><a href="#">Demand Calculator</a></li>//
<li><a href="clock.html">The Clock</a></li>
</ul>
</div>
</div>
</div>
</section> It’s likely that your
you can do