The DIV element fails to encompass all of its content

There seems to be an issue with the only div element on my page. It's covering the middle of the page, but I managed to make it extend all the way down using CSS tweaks.

However, there is a problem - the video inside the div is overflowing:

Below is the HTML code snippet:

<html>
<head>
 <link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
    <title>Arthur</title>
    <meta content="text/html" charset="windows-1251">
    </head>
<Body background="Images/background2.jpg">
<A Href="main.html"><IMG class="imgborder" src="Images/button.png" align="left"      height="50"></A>
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">

<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">

<Center><P align="justify">... </P>

<P align="justify">...</P>

<P align="justify">...</P></Font></Center>



<Center><iframe width="640" height="360" src="..." frameborder="5" 
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>



</div>
</body>
</html>

And here is the corresponding CSS code:

@charset"utf-8";
/* CSS Document*/
/*This section is for links*/
a:link {
    font-weight:normal;
    color:crimson
}
a:visited {
    font-weight:normal;
    color:Crimson;
}
a:hover {
    font-weight:bold;
    color: Royalblue;
    font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
    font-style:normal;
    font-size:18px;
}
blue {
    color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
    border-color: crimson;
    border:thick;
    border-style:outset;
}
.body {
    background-color: #0000FF;
}
html, body {
    height:100%;
}
#wrapper {
    margin: 0 auto;
    width: 990px;
    height:100%;
    overflow:hidden;
    position:relative;
}
#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-color: #fff;
}
#bottom Half {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}
div {
    /* set div to full width and height */
    width: 100%;
    height: 100%;
}
p {
    margin-left:2cm;
    margin-right:2cm;
}

Answer №1

One potential fix that comes to mind is adjusting the height of the black frame manually, or considering adding a

overflow: hidden;

attribute to the frame (in your somewhat complex tagging system, it could perhaps be within a <Center> tag).

At this moment, the <iframe> component is overflowing beyond its parent container (the black box). Setting a specific height for this container can allow you to manage its dimensions.

With overflow: hidden, you can conceal any overflow from the container - achieving one of two outcomes:

  1. Concealing any content that spills out of the container, preventing elements larger than the container from displaying parts that appear detached from the edges of the container

  2. If the elements are structured correctly with semantic HTML, many elements not constrained by height and width will automatically adjust their size based on their contents

Another option worth exploring is specifying position: relative and/or float: none for both the container and its children, as this approach can sometimes resolve the issue at hand.

It's important to reiterate that troubleshooting the code provided is challenging due to its outdated nature.

Answer №2

To apply the video's styles, use 'inherit'. This includes attributes like display, height, and width that can all be set to inherit.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with iOS Mobile Safari Navigation Bar/Toolbar when changing orientation

Experiencing some unexpected behavior with iOS mobile safari on version 13.3. I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While ever ...

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

Accessing web authentication through VBA

Having some difficulties trying to access my webtext account through VBA. The first hurdle I faced was identifying the tags for the username and password input boxes. After using inspect elements, it seems like the tags are "username" and "password." Howe ...

Is there a way to display the true colors of a picture thumbnail when we click on it?

In my project, I attempted to create a dynamic color change effect when clicking on one of four different pictures. The images are displayed as thumbnails, and upon clicking on a thumbnail, it becomes active with the corresponding logo color, similar to t ...

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

Automate web page interactions using Python Selenium to duplicate a class

Is there a method to duplicate a class? view image description here Upon examining the data-sitekey, I aim to replicate everything following it, namely 6Ld_LMAUAAAAAOIqLSy5XY9-DUKLkAgiDpqtTJ9b. Is this feasible? ...

Is it possible to align the second "navbar" div inline with the first "navbar" div?

I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working. * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; } #navb ...

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

Why is it that using div with a 100% width doesn't behave as one would anticipate?

Learning CSS has been an interesting journey so far. It's not always as intuitive as one might think, especially in web development. :) I recently attempted to create a simple, static progress bar using the following HTML file: <html> <he ...

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

Ensure that a DIV element stretches beyond the limits of its container

I am having an issue with a div that should overlap everything else as it functions as a menu. Despite trying various positioning tricks, the desired effect is not achieved. The div is only shown when hovering over a certain element. Here is the structure ...

Is it possible to dynamically add elements in AngularJS without relying on directives?

As a newcomer to Angularjs and not very fluent in English, I embarked on the journey of adding <li> using directives. You can see the result of my first attempt at this link. Next on my list was mastering two-way binding by passing values between th ...

How can I prevent scrolling in a Vue mobile menu?

In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as exp ...

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from to this: I am unable to modify the style and also need to add an intermediate step I have included , '.Mui-active': { color: '#1C6FC9', }, ...