Incorrect Zooming Behavior in HTML and CSS

Currently, I find myself on a website layout where the banner remains fixed at the top of the page while allowing scrolling for the inner div. However, when I zoom in using the browser (ctrl+'+'), the banner overflows the container without making the container horizontally scrollable. The inner div also overflows and becomes scrollable. Fiddle css:

div#container
{
        /*overflow: hidden;*/
        max-width: 98vw;
        height: 100vh;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto -10px;
        overflow:auto;

        }
div#main_outer {
    min-width:100%;
    max-width:100%;
    overflow: scroll;
    height: 90%;
    }
div.main {
    position:relative;
    max-width: 100%;
    min-width: 1800px;
    min-height: 90%;
    width: 1800px;
    height: 800px;
    display: table;
    margin: 0 auto;
    overflow:auto;
    }
  div#banner {
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1;
    font-size:25px;
    max-width: 100%;
    height: 10%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;}

I wish to have the banner and inner div always maintain the same width as the container and make the container horizontally scrollable when they overflow...

htmlcss

Answer №1

It seems like you're not getting the exact solution you want, but based on my understanding, maybe you're looking for something like this:

div#container {
    max-width: 98vw;
    height: 100vh;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto -10px;
    overflow:auto;
}
div.main {
    position:relative;
    max-width: 100%;
    width: 100%;
    min-height: 90%;
    width: 1800px;
    height: 800px;
    display: table;
    margin: 0 auto;
    overflow:auto;
}
div#banner {
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1;
    font-size:25px;
    max-width: 100%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;
}
<div id="container">
    <div id="banner">
      ...
    </div>
    <div id="main_outer">
      <div class="main">...
        <div style="width:360px;height:360px; background- color:white; position:relative;bottom:2%; top:2%; left:40%;"></div>       </div>
      <div class="main">
      ..</div>
    </div>
</div>

Answer №2

div#container {
    max-width: 98vw;
    height: 100vh;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto -10px;
    overflow:auto;
}
div.main {
    position:relative;
    max-width: 100%;
    width: 100%;
    min-height: 90%;
    width: 1800px;
    height: 800px;
    display: table;
    margin: 0 auto;
    overflow:auto;
}
div#banner {
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:1;
    font-size:25px;
    max-width: 100%;
    width: 1800px;
    height: 80px;
    display: table;
    margin: 0 auto;
    background-color: #ffcccc;
}
 <div id="container">
   <div id="banner">
   ...
   </div>
<div id="main_outer">
  <div class="main">...<div style="width:360px;height:360px; background-color:white; position:relative;bottom:2%; top:2%; left:40%;">
  </div></div>
  <div class="main">
  ..</div>
 </div>
 </div>

This resolved the issue as per my understanding of your requirements.

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

Creating a toggle link with 5 different states in coding

I have an HTML table where certain TDs contain inline styles, title tags, and links. I am looking to implement a feature where users can hide these elements by clicking the same icon multiple times. For example, on the first click, only styles are removed, ...

jqueryhtmlcss

Using jQuery to decrease the transparency of an image when the mouse hovers over it

I'm trying to set it up so that when you hover over an image, the opacity decreases by half. I know I must be making a simple mistake here, but I just can't figure out what it is. Any suggestions would be greatly appreciated. http://jsfiddle.net ...

jqueryhtmlcsshoverfadeto

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

Issue with submitting form on PHP page

I need some help with my signup form: <h2>Signup</h2> <form action="actions.php"> Email:<br> <input type="text" name="email"> <br> Password:<br> &l ...

phphtml

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

javascripthtmlcssoverlappingintersection-observer

Place text in the center of a div and add a numbered circle beside it

I need help adding a circle with a number next to a div containing centered text. Take a look at the image I have attached for reference. https://i.sstatic.net/tHA65.png I believe I am close to achieving the desired outcome, but I am struggling to center ...

htmlcssfrontend

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

javascriptjqueryhtmlcss

Can Bootstrap be used to create distinct spacing between table rows in a DataTable?

How can I achieve the look of separate table rows as shown in the image provided? I am currently using DataTables and bootstrap 5. I am looking to create visually distinct rows where the background is visible in between each row. Click here to view the i ...

htmlcssdatatablesbootstrap-5

Obtaining user input from a content editable div in a React component

Get content from editable div const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Element Properties <div name="textbox" ref ={contentref} cla ...

htmlreactjscontenteditablereact-dom

PHP is not processing the HTML form I submitted

HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...

phphtmlformshttp-post

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

htmlcssgoogle-chromeborderoverlap

Z-index malfunctioning - need to troubleshoot

Check out my website at Upon visiting the website on a PC, you'll notice that the navigation menu appears on the loader. Can anyone explain why this is happening? The only modifications I made to my CSS are: <style> .navbar-inverse { backg ...

htmlcsstagsnav

Replace Font Awesome icon with a background image

Looking to replace a Font Awesome icon with a background image using only CSS. Current Setup: .btn.btn-default.bootstrap-touchspin-up:before { font-family: Fontawesome; content: "\f067"; font-size: 14px; } Desired Outcome: .btn.btn-de ...

htmlcssfont-awesome

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

My current listing contains various files and folders: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon ...

javascripthtmljquery

Looking for assistance with parsing football league standings from a website using PHP

Is there a way to use PHP to extract an HTML table from a website? References: The table I want to parse can be found here: This is the code I attempted to use: <div class="row"> <div class="col-md-8"> <h1>Standings</h1 ...

phphtmldomweb-scrapinghtml-table

Determining html column values using a related column and user input

Is there a way to populate an HTML table column (using Javascript or jQuery) based on the values in another column and an input field? For instance, if I input the number 115 into the field, then the advance column should display a value of 1 for each ath ...

javascriptjqueryhtml

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Is it possible to give focus to a parent div that contains a child div without hiding the child div? I am integrating the Google Maps API and need to overlay a grid of transparent divs for inserting information. However, with these divs on top of my map, ...

javascriptcssgoogle-maps-api-3jquery