CSS: positioning an object element

After an interesting post of a user who actually needed to know if he could absolutely position an object element, I found out that when you turn this element into a block-level one, you can perform all the tasks related to a block-level formatting context. Of course, when you absolutely position an object element this will be automatically rendered as a block-level element. Anyway, for the sake of testing I've used a YouTube video that also includes a nested embed element. Here's the code:

#container {
    
    width: 50%;
    margin: 2em auto;
    height: 400px;
    position: relative;
    background: orange;
    
}

#container object {
    
    display: block;
    width: 380px;
    height: 286px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -143px 0 0 -190px;
    
}

#container object embed {
    
    display: block;
    width: 100%;
    height: 100%;
}

As you can see here, everything works just fine.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.