2

I have this CSS defined with my page:

.content {
    background-image: url("img/bg.jpg");
    width: 100%;
}

.exhibit {
    width: 100%;
    height: 100%;
    text-align: center;
}

.yt-embed {
    width: 560px;
    height: 315px;
    position: relative;
    top: 50%;
}

The DIV with .yt-embed is inside one with .exhibit, and the DIV with .exhibit is inside one with .content.

My issue is that the "top" property in my .yt-embed class is having absolutely no effect. However, it does work when it is set to a pixel value, instead of a percentage.

Nat Karmios
  • 325
  • 1
  • 4
  • 17

4 Answers4

3

Percentage values are relative-to-parent.

So, for any dimension of a given element, if you want to use a percentage value, the rendering engine must already know an explicit value for the corresponding dimension of the element's parent.

The one exception is the <html> element, which can accept a percentage value because the rendering engine will regard that value as relative-to-viewport instead of relative-to-parent.

Consequently, to enable your

.yt-embed {
    top: 50%;
}

declaration to work, you'll need to declare:

html, body, div {
    height: 100%;
}

at the start of your CSS.

Rounin
  • 27,134
  • 9
  • 83
  • 108
2

My issue is that the "top" property in my .yt-embed class is having absolutely no effect.

Your problem is that your outter elements don't have a specific height. They are being expaded by the inner element .yt-embed that has the height declaration.

Using percentage based values is widely used and works fine. Here's a quick example:

* {
  box-sizing: border-box;
}
.wrapper {
  display: inline-block;
  width: 300px;
  height: 300px;
  position: relative;
  background: #f00;
  padding: 10px;
}
.full.sized {
  width: 100%;
  height: 100%;
  background: #0f0;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #00f;
  color: #fff;
  padding: 10px;
}
<div class="wrapper">

  <div class="full sized">

    <div class="inner">inner</div>

  </div>

</div>
Romulo
  • 4,896
  • 2
  • 19
  • 28
  • Shouldn't this problem be eliminated by my height declaration in the .exhibit class? – Nat Karmios Nov 07 '15 at 12:56
  • @NatKarmios it depends! the declaration `height: 100%` means nothing if you don't have a fixed height to base the percentage. What is exactly 100% of automatic? I´m gonna edit the answer to show you that. – Romulo Nov 07 '15 at 12:58
  • Hmm, thanks for the info. The thing is, I don't know how big exactly my page content it going to be. I would like an element with the .exhibit class to be about 1 "screen" tall. Could you suggest a way of doing this? – Nat Karmios Nov 07 '15 at 13:03
  • maybe you could try using [`Viewport-percentage lengths`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)? – Romulo Nov 07 '15 at 13:12
  • It seems using vh as a unit for my .embed height does the trick. Thanks for all the help! – Nat Karmios Nov 07 '15 at 13:15
  • 2
    @NatKarmios be aware that `vh` and other viewport-percentage sizes aren't supported in IE8 and below. You can create a fallback by declaring the `height` first; e.g. `height: 500px`, `height: 80vh`. Modern browsers will read the `vh` older browsers will ignore it. Read about it here: http://stackoverflow.com/questions/23350510/how-to-write-css-fallbacks-for-vh-vw. – Alex Nov 07 '15 at 13:22
0

You can use the percents by changing the position to absolute

.yt-embed {
    width: 560px;
    height: 315px;
    position: absolute;
    top: 50%;
}
EugenSunic
  • 13,162
  • 13
  • 64
  • 86
0

The parent element (in this case .exhibit) needs to have a pixel value on the height property, so that the browser can determine where exactly its position is.

You can read about top here: http://www.w3schools.com/cssref/pr_pos_top.asp

The same applies when applying a percentage value to the height of an element within another element; if the child has a percentage value then the parent must have a pixel value to have any effect.

Edit

Example:

.exhibit {
    height: 315px;
        *or*
    min-height: 315px;
}

or create another div inside .exhibit, containing .yt-embed, with these values if necessary.

.yt-embed {
    top: 50%;
    position: absolute/relative;
    width: 560px;
}
Alex
  • 125
  • 1
  • 2
  • 13