1

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.

Yu Mad
  • 828
  • 2
  • 12
  • 29
  • Event Tag and Event Title elements need to have position: absolute and an X,Y assigned. left:0, top: 0, for example. I see that their parents have absolute. If you don't need to absolutely position those they can be position: relative. Check [here](http://stackoverflow.com/a/32919558/3377049) for different options on keeping the container only as wide as the content. – Hastig Zusammenstellen Dec 22 '16 at 20:35

3 Answers3

1

Made a few CSS tweaks - you were close! Just needed to position: absolute the correct elements along with top and bottom, and position: relative the parent.

By doing this, the width of the element is automatically restricted to its content.

Check out my comments to see what was added and removed.

html,
body {
  height: 100%;
  width: 100%;
  box-style: border-box;
  margin: 0px
}
.event-page {
  width: 100%;
  height: 100%
}
.event-page-header {
  position: relative;
  height: 450px;
  max-height: 70vh;
  padding: 0 0 1.75rem;
  width: 100%;
}
.event-page-header .event-header-content {
  width: 100%;
  height: 100%;
  /*position: absolute; // removed */
  z-index: 200;
  padding: 0 20px;
  /*bottom: 0; // removed */

  /* added 1 line: */
  position: relative;
}
.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;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
  padding: 5px;

  /* added 2 lines: */
  position: absolute;
  top: 0;
}
.event-header-title {
  color: #fff;
  font-family: Lato;
  font-size: 3em;
  font-weight: 300;
  line-height: 120%;
  margin: .5rem 0;

  /* added 2 lines: */
  position: absolute;
  bottom: 0;
}
.event-header-image {
  background: red;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
}
@media (min-width: 769px) {
  .event-header-image::after {
    background: linear-gradient(rgba(65, 77, 87, 0), rgba(65, 77, 87, .7));
    bottom: 0;
    content: '';
    height: 70%;
    left: 0;
    position: absolute;
    width: 100%;
  }
}
<div class='event-page'>
  <header class='event-page-header'>
    <div class="event-header-content">
      <div class="event-type-label">Event Tag</div>
      <h1 class="event-header-title">Event Title</h1>
    </div>
    <div class='event-header-image'></div>
    <div class="clear"></div>
  </header>
</div>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
1

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.

Jay
  • 165
  • 9
0

You could use flex-box like in this example. Or just use position: absolute and add all styling to a sub span to just use the space needed.

Faegy
  • 942
  • 1
  • 12
  • 29
  • i was trying to avoid using flexbox. i did a workaround by setting the `absolute` div to `relative` and then making each of the elements `position:absolute` – Yu Mad Dec 22 '16 at 20:32
  • You could use an [`absolute` position](http://codepen.io/anon/pen/RoOYRK?editors=1100) – Faegy Dec 22 '16 at 20:34