I have four blocks where I specified before, in order to change the radius of the central block using before, the problem is that all my blocks are purple, I need to apply different colors for all blocks, for example blue, yellow, red, green, I guess what is needed use childs for this example, but I don't quite understand how to implement it
.EnjoyGirlsContainer {
text-align: center;
}
.EnjoyGirlsList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.EnjoyGirlsList div img {
width: 240px;
height: 304px;
max-width: 100%;
margin: 20px 5px 5px 5px;
margin-right: 0;
margin-left: 0;
}
.EnjoyCardContainer {
position: relative;
margin: 7px;
margin-right: 0;
margin-left: 0;
}
.EnjoyCardChildContainer {
position: absolute;
width: 100%;
bottom: 5px;
background: purple;
}
.EnjoyCardChildContainer:after {
content: '';
position: absolute;
left: 0;
width: 100%;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
box-sizing: border-box;
border-top: 8px solid purple;
}
.EnjoyCardChildContainer:first-child:before {
border-top: 8px solid red;
}
.EnjoyCard {
margin-right: 10px;
margin-left: 10px;
}
.EnjoyCardChildContainer h3 {
font-size: 30px;
}
<div class="EnjoyGirlsList">
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
</div>
.EnjoyCard:nth-child(1) .EnjoyCardChildContainer:after {
filter: drop-shadow(0 1px 4px rgba(223, 8, 8, 0.967));
border-top: 8px solid yellow;
}
Related
I have a issue about a position of div.
I want to put my div "list-button" in the bottom of the main div "list".
And i want that the position will not change with the size of the text above. Actually the position depend of the text, so it is not what i want
Example from application
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
Thanks you for help me.
You may use position: absolute; to .list-button and position: relative; to .list to position the text to the bottom of .list container.
.list {
...
position: relative;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
...
}
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
position: relative;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://picsum.photos/id/500/200/230" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
You could achieve that by applying the property align-self: end;or justify-self: end; for the .list-button.
For that, it is required that the parent element has the display: flex; property.
I have run into this problem I just can't fix and I believe it is due to the margin being so big.
The problem is that I would like 3 images beside each other on my website but they don't want to be next to each other because I believe the margin is so big.
I am very new to coding sorry if I'm missing something.
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
z-index: 10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left: -20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left: -30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}
<body>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</body>
I assume that you are trying to stick the images on your main page together. This is caused by the margins on your a tags together with the justify-content: space-around; of the .cardContainer.
To make the images stick together, remove the margins in the a and change justify-content: center in .cardContainer.
Your code with my modifications is added below.
When you use justify-content: space-around; the remaining space that elements can't take, will be spread around the items. This is displayed in the image (and snippet) below. This has space between items even though there is no margin.
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: space-around;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
When you use justify-content: center; instead, the remaining space where elements can't go will only be added to the left and to the right of the content. So it gets centered and there will be no space inbetween the items (except if you set a margin or padding).
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Your modified code:
body {
background-color: orange;
}
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
nav ul {
background-color: tomato;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
/* remove this padding to make the images really stick together */
padding: 10px;
z-index:10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left:-20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left:-30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
/**********************************
This section is for styling tables
***********************************/
table, th, td {
border: 1px solid HoneyDew;
border-collapse: collapse;
}
tr {
background-color: PaleTurquoise;
}
th, td {
vertical-align: top;
padding: 5px;
text-align: left;
}
th {
color: purple;
}
td {
color: purple;
}
/********************************/
<!DOCTYPE html>
<html>
<head>
<title>Get Fit</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<meta charset="utf-8"/>
</head>
<body>
<header>
</header>
<main>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
I have a nested Table in which I have to show a Tooltip for the texts. I have extracted the problem in an jsfiddle, the problem is that I can not position the blue Element on top of the Block 2.1 Content even if i set z-index very big.
Here again the html and css code to that:
.block {
display: block;
}
.content {
border: 1px solid #ccc;
padding: 2px 5px;
box-shadow: 5px 5px 10px black;
height: 30px;
width: 90%;
line-height: 30px
}
.block1_content {
z-index: 3;
position: relative;
background: white;
}
.block2_content {
z-index: 2;
margin-left: 10px;
position: relative;
background: #ccc;
}
.tooltip {
position: absolute;
display: block;
background: blue;
color: white;
height: 40px;
width: 100px;
z-index: 99999;
padding: 5px 10px;
top: 15px
}
<div class="block1 block">
<div class="block1_content content">Block 1 Content</div>
<div class="block2 block">
<div class="block2_content content">
Block2 Content
<div class="tooltip">Tooltip</div>
</div>
</div>
</div>
<div class="block1 block">
<div class="block1_content content">Block 2.1 Content</div>
<div class="block2 block">
<div class="block2_content content"> Block 2.2 Content</div>
</div>
</div>
EDIT
Here a little bit complicated version of the code/problem as requested.
hope this helps you. thanks
.block {
display: block;
}
.relative{
position: relative
}
.content {
border: 1px solid #ccc;
padding: 2px 5px;
box-shadow: 5px 5px 10px black;
height: 30px;
width: 90%;
line-height: 30px
}
.block1_content {
z-index: 3;
position: relative;
background: white;
}
.block2_content {
z-index: 2;
margin-left: 10px;
position: relative;
background: #ccc;
}
.tooltip {
position: absolute;
display: block;
background: blue;
color: white;
height: 40px;
width: 100px;
z-index: 99999;
padding: 5px 10px;
top: 15px
}
<div class="block1 block">
<div class="block1_content content">Block 1 Content</div>
<div class="block2 block">
<div class="block2_content content">
Block2 Content
</div>
</div>
</div>
<div class="block1 block relative">
<div class="tooltip">Tooltip</div>
<div class="block1_content content">Block 2.1 Content</div>
<div class="block2 block">
<div class="block2_content content"> Block 2.2 Content</div>
</div>
</div>
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
I am attempting to get #needQuoteWrap to be at the bottom of the #sideContactWrap. #sideContactWrap is a fixed element. I'm not sure what I am doing wrong. I put an inner container with position:relative and height:100%.
I have tried making #needQuoteWrap as position:absolute, but when I do that it disappears.
Does anyone know how I can get #needQuoteWrap at the bottom of #sideContactWrap?
Jsfiddle
#sideContactWrap {
background: #EDEDED;
width: 30%;
height: 100vh;
position: fixed;
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
padding: 20px 0;
}
#sideContactInner {
height: 100%;
width: 100%;
position: relative;
}
.sideBlock {
width: 90%;
margin-bottom: 15px;
padding: 0 5%;
height: auto;
border: 1px solid red;
text-align: left;
}
.sideBlockText {
margin: 0;
}
#needQuoteWrap {
width: 100%;
height: 100px;
position: relative;
bottom: 0;
right: 0;
border: 1px solid red;
}
#needQuote {
height: 100px;
width: 100%;
background: #b82222;
text-decoration: none;
color: #FFF;
}
<div id="sideContactWrap">
<div id="sideContactInner">
<div class="sideBlock">
<h2 class="secTitle">Contact Info</h2>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">address</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Toll Free</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
</div>
<div id="needQuoteWrap">
<a href="#">
<div id="needQuote">Need a quote?</div>
</a>
</div>
</div>
</div>
Change the #needQuoteWrap element to have position: absolute;. Child elements are relative to the parent when the parent has a position set to anything other than static (the default).
The below example shows it's now at the bottom.
#sideContactWrap {
background: #EDEDED;
width: 30%;
height: 100vh;
position: fixed;
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
padding: 20px 0;
}
#sideContactInner {
height: 100%;
width: 100%;
position: relative;
}
.sideBlock {
width: 90%;
margin-bottom: 15px;
padding: 0 5%;
height: auto;
border: 1px solid red;
text-align: left;
}
.sideBlockText {
margin: 0;
}
#needQuoteWrap {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}
#needQuote {
height: 100px;
width: 100%;
background: #b82222;
text-decoration: none;
color: #FFF;
}
<div id="sideContactWrap">
<div id="sideContactInner">
<div class="sideBlock">
<h2 class="secTitle">Contact Info</h2>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">address</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Toll Free</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
</div>
<div id="needQuoteWrap">
<a href="#">
<div id="needQuote">Need a quote?</div>
</a>
</div>
</div>
</div>
position:absolute to #needQuoteWrap is working as expected.
#sideContactWrap {
background: #EDEDED;
width: 30%;
height: 100vh;
position: fixed;
box-shadow: -9px 0px 9px 1px rgba(0, 0, 0, .2);
padding: 20px 0;
}
#sideContactInner {
height: 100%;
width: 100%;
position: relative;
}
.sideBlock {
width: 90%;
margin-bottom: 15px;
padding: 0 5%;
height: auto;
border: 1px solid red;
text-align: left;
}
.sideBlockText {
margin: 0;
}
#needQuoteWrap {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}
#needQuote {
height: 100px;
width: 100%;
background: #b82222;
text-decoration: none;
color: #FFF;
}
<div id="sideContactWrap">
<div id="sideContactInner">
<div class="sideBlock">
<h2 class="secTitle">Contact Info</h2>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">address</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Toll Free</p>
</div>
<div class="sideBlock">
<p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
</div>
<div id="needQuoteWrap">
<a href="#">
<div id="needQuote">Need a quote?</div>
</a>
</div>
</div>
</div>