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.

Improve this question
4
  • Why don't you add your html. Commented Nov 7, 2015 at 12:44
  • You do not have a height set on your .content div for the percent unit to derive from. Commented Nov 7, 2015 at 12:46
  • On top of @Abhitalks comment if nothing worked make the heights in px I think it should be working then, but most probably it's due to the fact that you have not height for .content. Commented Nov 7, 2015 at 12:49
  • Basics of percentage heights: stackoverflow.com/a/31728799/3597276 Commented Nov 7, 2015 at 13:03

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The other exception is absolutely positioned elements.
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>

Improve this answer

6 Comments

Shouldn't this problem be eliminated by my height declaration in the .exhibit class?
@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.
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?
maybe you could try using Viewport-percentage lengths?
@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: stackoverflow.com/questions/23350510/….
|
0

You can use the percents by changing the position to absolute

.yt-embed { width: 560px; height: 315px; position: absolute; top: 50%; }
Improve this answer

Comments

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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.