A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking using jQuery. However, I am facing an issue where I cannot achieve an evenly spaced margin around this div after it appears. The specific div that requires margin adjustment has the id "info".

The structure of my HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="description" content=""/>
        <meta name="keywords"content=""/>
        <title></title>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#info").fadeToggle("slow");
  });
});
</script>
    </head>
    <header>
        <div id="nav">
            <p><a id="btn" href="#">+</a></p>
        </div>
    </header>
    <body>
        <div id="container">
            <div id="info">
            </div>
        </div>
    </body>
    <video id="video_background" src="vid/147000037.mp4" autoplay>
</html>

Below is the CSS style sheet utilized for styling:

* {
    margin: 0;
    padding: 0;
}


body {
    font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;

}

header {
    z-index: 999;
    display: block;
    height: auto;
    width: 100%;
    position: fixed;
}

header a {
    text-decoration: none;
    font-size: 1.8em;
    color: #000000;
}

#nav {
    position: relative;
    float: right;
    top: 15px;
    right: 20px;
    color: #000000;
}


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

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

#info {
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.97);
    z-index: 900;
    display: none;
    position: fixed;
    margin: 10px;
    vertical-align: center;
}

Answer №1

To ensure your infobox has a fixed position, you can eliminate the need for specifying height/width and margins in your CSS. Instead, utilize offsets to establish a responsive container with a pleasing margin. Update your #info CSS as shown below:

#info {
   /* No need to specify height & width */
   background: #bada55; /* Added for better visibility */
   z-index: 900;
   display: none;
   position: fixed;
   /* Discard margin and apply appropriate offsets */
   top:15px;left:15px;right:15px;bottom:15px;
   vertical-align: center;
}

View the changes here.

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

Having trouble with HTML on Eclipse for Android development?

There seems to be an issue with the HTML code in this program. When attempting to use x or any other HTML code, it does not format correctly. This is unusual as HTML has worked in the past. The problem occurs with the first string array and not with the ...

SQL statement not recognized

My current project involves conducting an experiment using a pre-coded script accessible through the link here. In this experiment, I'm utilizing xampp as my web server with mysql. However, when I attempt to run the authentication page containing the ...

Stop menu items from shifting when focused

I've developed a mobile hamburger menu and attempted to adjust the padding to create space between the text and the borders. Here's the HTML: #menu-solutions:hover .menu-item-text, #menu-solutions:focus .menu-item-text, #menu-solutions:ac ...

Image not showing correctly after closing the bootstrap modal

I am currently working on creating a gallery with hover effects for each image, similar to the one found here. My goal is to have a Bootstrap modal open when I click on a link within the hovered image, displaying additional content. Everything seems to be ...

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

HTML - Using Tables to Add and Edit Rows

Take a look at this demo on JSFiddle for my project: Demo jsfiddle I'm currently in the process of creating a table with various functionalities. The function "sortTable" is responsible for sorting the table and it's functioning as expected. T ...

Angular binding for selecting all data

Upon checking a checkbox for a single item, the bound data is retrieved and added to an array. However, this does not happen when using selectAll. Code snippet in Angular for obtaining the object of a checked item: $scope.selectedOrganisations = []; $sco ...

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

What could be causing the undefined status of my checkUser() function?

I have implemented a brief script on my signup page to define the function checkUser(user) at line 6. In the code section at the end of the HTML for the sign up form, I included an inline script onBlur='checkUser(this) within the <input> named ...

Guide to modifying the class color using javascript

I am experiencing an issue with this particular code. I have successfully used getElementById, but when I try to use document.getElementsByClassName("hearts");, it does not work as expected. This is a snippet of my HTML code: status = 1; function change ...

Techniques for Adding Background Color to Fieldset Border

Recently starting to learn HTML and stumbled upon a question: How can I create a background color or image for a field set border? Can I simply use regular color values, or do I need special codes for creating a background color in a field set? Any insig ...

Creating a dynamic HTML table in Django by populating it with values from iterative lists

Currently, in the Django framework, I am endeavoring to construct a table using the values stored within a list: List : [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [3, 3, 3, 3]]. The envisioned table layout is as follows: Below is the code snippet that ...

Is it possible to simultaneously run watchify and node-sass watch together?

Currently, I am utilizing npm scripts in conjunction with watchify and node-sass while incorporating the -w parameter. I am curious if it is feasible to execute both of these 'watch' commands simultaneously. Would this setup ensure that only sty ...

Utilize jQuery to extract the content, rearrange the content, and then encapsulate it within fresh

I attempted all day to rearrange this menu the way I want, but since I am new to jQuery, I'm facing some challenges. Here is what I am currently trying to achieve: Inside the last td.top of this menu, there are 3 ul.sub li items. I aim to extract ...

After being redrawn, the line on the canvas vanishes

After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle? <script language=" ...

Populate the content of the child DIV to match the grid layout as a whole

I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am tryi ...

Issue with header background images not showing up in Safari browser

On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...

Using jQuery to toggle the visibility of HTML elements

Hi there, I am trying to create an interactive HTML sidebar where each section shows its respective posts when clicked. However, I am facing issues as the content keeps hiding continuously. <div class="col-md-3"> <div class="list-grou ...

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...