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

A tutorial on utilizing fopen in PHP to write text lines to a .txt file

Struggling with PHP code utilizing fopen to write text lines into a textarea and save them to a .txt file. Below is the code I've been working on, hoping to get some assistance! <?php session_start(); if (!isset($_SESSION['username&ap ...

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

Looking for assistance with implementing mouseover scrolling on an unordered list

I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code: $(document).ready( ...

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

Methods for applying a style property to a div element with JavaScriptExecutor in Selenium utilizing C#

I have been attempting to change the style of a div element using JavascriptExecutor in C#, but so far, nothing has happened. IJavaScriptExecutor js = (IJavaScriptExecutor)driver; IWebElement element = driver.FindElement(By.XPath("//div[contains(@class, ...

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

I am struggling to retrieve JSON data from a PHP URL using JavaScript and display it within a JQuery mobile "li" tag as a category list. Despite spending the last 8 hours on it, I can't seem to get it working using the code provided below. Any help wo ...

Navigating a Multi-Page Website with Sleek Scrolling

I've been searching for a solution everywhere but haven't had any luck. I'm trying to implement a smooth scroll effect that works seamlessly across multiple pages. For instance, the smooth scroll effect is present on the homepage with naviga ...

fetching images from the database

I am currently working on a classified website project where I want to display one photo from the database on the main page, the same photo on a category page, and then all photos when viewing the full item listing page. My goal is to have a similar setup ...

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

What is the process for changing the border color of a Select Component?

Is there a way to change the border color of a select component in Material UI library without directly setting the property in inspect elements? I can see it working when I set the property that way, but how can this be achieved using class override? htt ...

Repair copied website data in Excel spreadsheet

I'm currently in the process of extracting a large volume of data from a website. However, when I paste it into Excel, it's not in a table format and appears like this: France Europe Spain Europe Egypt Africa I'm looking for a way to str ...

increasing the size of the input thumb compared to the others

Hello fellow React developers, I'm currently learning by coding and I have a question about a slider. I'm trying to make the thumb of the slider bigger, but when I increase its size it doesn't fully display within the input area (as you can ...

Adaptable Navigation

I am currently working on creating a responsive navigation menu inspired by Bootstrap's design. However, I have encountered some challenges in implementing it. The current issue I am facing is that the navigation disappears when transitioning from a s ...

The Selenium driver's execute_script() function is not functioning as expected

When I attempt to execute a JavaScript using driver.execute_script, nothing happens and the system just moves on to the next line of Python code. Any ideas? I've been web scraping on a webpage, using JavaScript in the Console to extract data. The Jav ...

Press on Selenium with Python

I am experiencing an issue with clicking in Selenium as it is not able to click on the button. Below is the code I am using: from selenium import webdriver import time import click from selenium.webdriver.support.select import Select from selenium.webdriv ...

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

This situation is causing me frustration... depending on the zoom level of the browser, my boxes do not align properly and it ends up looking messy (in all browsers). Any advice? Could I handle this more effectively with jQuery? HTML </div> <div ...

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

Automatically fill in checkboxes based on user input

Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...