I have a Codepen link where I have an absolutely positioned div, which has two children.
I'm trying to move one child to the top of the div, while the other to the bottom, but cant quite figure it out with bottom:0 and top:0. I'm also trying to only use the width of the content for one of the elements, as opposed to the entire width of the parent element.
Change the CSS :
.event-type-label{
background: rgba(161,178,166,.8);
border-radius: 2px;
overflow: hidden;
font-family: Lato;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
font-size: 0.8em;
font-weight: 300;
letter-spacing: .05em;
line-height: 1;
padding: 5px;
}
.event-header-title {
color: #fff;
position: absolute;
bottom:0;
font-family: Lato;
font-size: 3em;
font-weight: 300;
line-height: 120%;
margin: .5rem 0;
}
Adding position:absolute to the childs will solve your problem. As absolute positioned elements take the width of content only.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments