CODEWITHSUNDEEP
javascripthtmlcss
Burn_E99
Burn_E99

Reputation: 1098

Position a div at the bottom of an absolute div without using tables or positoin:absolute

I am working on a webapp that needs a div to be pushed to the bottom of another absolutely positioned div. I have tried bottom: 0 and vertical-align: bottom with neither of them working. Is there some way to move a div to the bottom of its parent div using CSS that I may not have thought of or some sort of workaround that could be done using JavaScript?

#wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5); 
	z-index: 1000;
}
#outer {
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
    background: rgb(0, 0, 0);
    z-index: 1001;
}
#a {
    position: absolute;
    width: inherit;
    height: 100%;
}
#inner {
    bottom: 0;
    background-color: white;
}
.invert {
    color:white;
}
.revert {
    color:black;
}
.text-center {
    text-align:center;
}
<div id="wrapper">
    <div id="outer" class="invert">
        <div id="a">
             <h3 class="text-center">Words!</h3>
             <h4 class="text-center">0 - 0</h4>
            <div id="inner">
                <span class="revert">This needs to be at the bottom</span>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 125

Answers (1)

Jacob
Jacob

Reputation: 2155

See code below. Also, read up on the position property on MDN.

#wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5); 
	z-index: 1000;
}
#outer {
    position: relative; /* <-- add this -------------- */
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
    background: rgb(0, 0, 0);
    z-index: 1001;
}
#a {
    position: absolute;
    width: inherit;  /* <-- change this -------------- */
    width: 100%; /* <-- to this -------------- */
    height: 100%;
}
#inner {
    position: absolute; /* <-- add this -------------- */
    width: 100%; /* <-- add this -------------- */
    bottom: 0;
    background-color: white;
}
.invert {
    color:white;
}
.revert {
    color:black;
}
.text-center {
    text-align:center;
}
<div id="wrapper">
    <div id="outer" class="invert">
        <div id="a">
             <h3 class="text-center">Words!</h3>
             <h4 class="text-center">0 - 0</h4>
            <div id="inner">
                <span class="revert">This needs to be at the bottom</span>
            </div>
        </div>
    </div>
</div>

Upvotes: 5

Related Questions