CODEWITHSUNDEEP
htmlcssposition
Paul
Paul

Reputation: 3368

Bottom:0 not working when position:absolute applied

I am unsure what I am doing wrong to get my div #buttonLine to display at the bottom of the #pdfBannerRight div.

I have applied height: 100%; to pdfButtonWrap and bottom:0 to get the div to stretch the entirety of the container and then applied bottom:0 to #buttonLine.

Does anyone see why #buttonLine is not displaying at the bottom of its container?

#pdfBannerRight {
	width: 50%;
	background: #2f2f2f;
	height: 450px;
	position: absolute;
	top: 20%;
	right: 0;
}
#pdfBannerRightCont {
	position: relative;
	width: 100%;
	height: 100%;
}
#pdfButtonWrap {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
}
#buttonLine {
	width: 80px;
	height: 143px;
	border-top: 4px solid #FFF;
	border-right: 4px solid #FFF;
  position: relative;
  bottom: 0;
}
.pdfSliderButton {
	text-decoration: none;
    display: block;
	margin: 8px 8px 8px 13px;
	color: #2f2f2f;
	background: #FFF;
	background: #b82222;
	font-size: 50px;
	vertical-align: middle;
	outline: none;
	border: none;
	cursor: pointer;
<div id="pdfBannerRight">
					<div id="pdfBannerRightCont">
						<div id="pdfButtonWrap">
							<div id="buttonLine">
								<button type="button" class="previous pdfSliderButton" id="slickPrev" role="button" data-role="none">&#8249;</button>
								<button type="button" class="next pdfSliderButton" id="slickNext" role="button" data-role="none">&#8250;</button>
							</div>
						</div>
					</div>
				</div>

Upvotes: 0

Views: 44

Answers (1)

Bonlou
Bonlou

Reputation: 472

You made a mistake, just turn position to absolute and your div will go to the bottom.

#buttonLine {
  width: 80px;
  height: 143px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  - position: relative;
  + position: absolute
  bottom: 0;
}

Upvotes: 1

Related Questions