Video talks website need help with positioning/sizing

I am trying to create a page similar to the video talks part-way down the home page at

I have a CodePen

See the Pen ted-like video layout (@gandalf458) on CodePen.

I have also uploaded the script to as it can be difficult to see properly on codepen.

I have a number of issues…

  1. I cannot fathom out why the images are ignoring the 90% width wrapper. Taking just the bigger image, I thought its width should be 60% of the wrapper ie 60% of 90%, but it’s 60% of the page width. Perhaps it’s not possible?

  2. I want a 2px padding round the edge of each image but if I add padding:2px to the frame element (as per TED) it doesn’t work. It gives 2px padding round the whole lot.

  3. The smallest image is overlapping the image above it. It is supposed to be 40% from the top (as TED, except they use inline styles) but it seems to be higher, and it doesn’t move relative to the others as I expected.

Any ideas please guys?

They have “position:absolute” that says them to calculate dimensions relative to the page and not to parent elements

Use “border-box: box-sizing” to prevent padding from being added to the element’s width and height.

Same problem - absolute position

1 Like

Many thanks @megazoid - that simple! :slight_smile:

Follow these steps to fix it:

  1. Modify .video class:

    position: relative;
    box-sizing: border-box;
    padding: 1px;

  2. Remove position:absolute from .video-2, .video-3, leave only for first one

  3. Add position:relative to .wrapper

Thanks again. Looking good!

I have made quite a bit of progress with my site but have come unstuck with the video positioning when I add a couple more and if I try to rearrange them, particularly if I try to put a smaller video top left. It’s as though it is clearing a float.
@megazoid you kindly helped me thus far. I have updated the page at but not the codepen

Hi, gandalf458.

Just pitching in temporarily in the absence of megazoid.

I don’t what your design intent is (I just poppped in), but the page has no <doctype html> and no <head> section. Without a guiding structure, it will most likely fail to render as desired.

If you could simulate a screen shot showing how you expect it to look, that would help.

In the meanwhile, this is what I see on my PC.

Hi ronpat

Thanks for the reply. Yes, that’s what I get. There’s no doctype or head as the page is intended to be included in the main page.

What is not working is that the two last images are not positioning vertically as I wanted/expected. The bottom right has left: 80%; top: 40% but is positioned left 80% top 60% and the bottom left has left 0 top 40% and is positioned left 0 top 80%.


Update: I have tidied things up and the file is now at complete with doctype etc.

All of the video boxes are position:relative. Which means they never really lose their non-positioned flow in the page. Instead of giving video-4 {top:60%}, try (top:-20%} or {bottom:20%}. It still hasn’t left its place in the flow, but it “appears” to have. Do the same thing with the video-5 box.

Position:relative is not the best way to move things around vertically.

You can toss in some outlines and/or background colors to help visualize the size of the page and its boxes.


I disabled positioning in the following styles and tossed in one float:left.

.video-1 {
    height: auto;
    left: 0;
/*    position: absolute; */
    top: 0;
    width: 60%;
.video-1, .video-2, .video-3, .video-4, .video-5 {}.video {
    box-sizing: border-box;
    float: left;  /* ADD Me! */
    padding: 1px;
/*    position: relative; */

Seems to do what you want.

Tested on a “working page”; ie. with doctype, etc.

Thanks @ronpat It does indeed seem to do what I want. I shall have to see what happens if I try a different alignment of images.

Odd, I thought there was another reply to my original question which no longer appears as I had a float: left on .video at one stage and @megazoid said I needed position: absolute on the first video.

Thanks again G

Update: I have tidied things up and the file is now at complete with doctype etc.

Position:absolute on the first vid took it completely out of the flow. Sorry to say, that was a deal-breaker, so to speak.

1 Like

For the record, there is an error in the CSS that I posted (apparently I made the error copying from Firebug and didn’t notice).

This line:

.video-1, .video-2, .video-3, .video-4, .video-5 {}.video {

should be

.video-1, .video-2, .video-3, .video-4, .video-5 {

It doesn’t seem to have hurt anything, but should be noted.

The actual CSS file is correct.

Thanks. Each vid has the .video class and one of .video-1 … .video-5 so I guess that amounts to the same thing. I still haven’t plucked up courage to rearrange the vids to see what happens then. :wink:

Update: I have tidied things up and the file is now at complete with doctype etc.

Let me know what happens. I didn’t really examine the video part of the page very thoroughly. It “looks” like it should work, but who knows. Fingers crossed.

It doesn’t seem to work if I change the sizes and positions of the video-1 … video-5 elements. I note that uses inline CSS for the position, although I can’t believe that makes much difference. I’m also puzzled that on TED the images use position: absolute. I’m now thoroughly confused.

Update: I have tidied things up and the file is now at complete with doctype etc.

Does TED move the big boxes around, or does TED swap the vids between boxes? I still don’t understand the intent because I don’t have a TV and don’t watch TED.

If you reload the home page of or if you visit on different occasions the vids do move around a bit. What I’m after is less sophisticated than TED but I want to be able to handle different configurations of video layouts. Basically I would like the %age left and %age top to do what they seem to do on, that is, they seem to position the images the correct percentage of one of the containing divs.

Am I making any sense at all???

Incidentally, I don’t have TV and I’ve not watched any of the TED videos. I’ve not got further than the home page and have been pulling out what remains of my hair :wink:

Update: I have tidied things up and the file is now at complete with doctype etc.

Thanks for including the link to the TED site. I haven’t seen it in a long time. It’s much nicer now, including subtitles!

Their site uses a lot of JS. Most of the site (all?) does not render if JS is disabled or some links are blocked. They seem to have 5 pattern pages from which more patterns are possible. Those patterns do not appear to be truly random. The one being displayed is just one of the patterns that has been created. They could be swapping the vids between certain boxes, too. FF froze before it would load one of their stylesheets, so I really don’t know how they do it. Just know that it’s not random and there is lots of JS on the page.

Ah, that’s interesting. I thought it might be random - although that was not what I want, just a handful of predefined configurations.

Is the JS affecting the positioning at all?

I think I’m going to have to give up on the idea of exactly positioning the images using top and left attributes as the TED website does, and rely on floating the images as you have shown me @ronpat. I assume as I’m now using floats on the .video class, that the top and left attributes are now redundant? Or do they still have a use? I noticed that Firefox’s element inspector didn’t have the left and top attributes crossed out.