Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most importantly, how can I rectify it? Thank you.

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id='outer"></div>

P.S: I prefer using percentages instead of pixels.

htmlcss

Answer №1

It seems like I've grasped the concept of what you're looking for. The issue lies in the placement of your <div>.

As you may be aware, a percentage is a relative measurement. Specifically, when using width: 50%, it's relative to the width of its parent.

Situation 1

If the parent's width is set at 100%, then your div's width will always be 50% of that, translating to 50% of the screen, regardless of zoom level.

Situation 2

When the parent div has a fixed width (such as 500px), your div's width will equate to 50% of 500px, which amounts to 250px. This value will shift with changes in zoom level.

You can view examples of both scenarios in this jsfiddle link for better understanding: https://jsfiddle.net/jormaechea/om91sody/

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

Learn how to customize the global style within a child component in Angular and restrict the changes to only affect that specific component

I have applied some custom css styling in my global style.css file (src/style.css) for my Angular project. However, I encountered a problem when trying to override this styling in a specific component without affecting the rest of the project. Currently, I ...

htmlcssangularangular-components

Utilizing the transform: origin property to perfectly align an element

I've tilted a basic paragraph and I'm attempting to position it on the left side of the browser at 0% from the top of the browser at 50%. http://example.com p { position: fixed; -webkit-transform-origin: left center; -webkit-transfo ...

htmlcss

Maintaining a one-line CSS menu layout, the middle element is designed with two inner elements that seamlessly stack without disturbing the appearance of the menu items

I'm facing a challenge with aligning the two elements in the "inline" class - I need them stacked so that the element containing "SECURITIES" is under "A.M.S". The issue arises when I try to add a line break after the A.M.S element, which also affects ...

htmlcss

Display animated GIFs in the popular 9Gag format

Is there a way to display a GIF file after clicking on a JPG file, similar to the functionality on 9Gag.com? I am currently using timthumb.php for displaying JPG images. https://code.google.com/p/timthumb/ Below is the code snippet: <div class="imag ...

javascriptphpjquerycss

Trouble displaying REACT.jsx in browser

I'm currently learning React and struggling to get it running smoothly. HTML function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ...

javascripthtmlreactjs

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear. Here is the structure of a website: Mainpage (Containing all resources and scripts) All Other pages (HTML only consists of elements of that ...

javascriptphpjqueryhtmlajax

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

var windowHeight = $(window).height(); var windowWidth = $(window).width(); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max( ...

javascriptjquerycss

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

csshtmlweb-applicationsweb

Issues with styling SVG when using the `<use>` element

I am currently faced with a challenge involving CSS, where I need to modify the size and color of an SVG element that is being displayed using <use>. The specific SVG in question is as follows: <svg xmlns="http://www.w3.org/2000/svg" width="24" h ...

csssvg

Ways to obtain the chosen option from a drop-down menu using jQuery

I'm currently experiencing an issue where the selected value of a drop down is not being displayed correctly. Instead of selecting the dropdown value, it's adding another value to the list. Below is the code snippet I'm using: JQuery var ...

javascriptjqueryhtmldrop-down-menu

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

if the input field is empty, eliminate the class

Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...

jqueryhtmlcss

Included Image Hyperlink with Limited Clickability in HTML

When trying to turn my image into a hyperlink, I enclosed it with the tag. Oddly enough, only the lower portion of the image is responsive as a link. The upper part seems unresponsive. Here's the code snippet I used: <a href="link-here"& ...

htmlimagehyperlink

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

javascripthtmlcss

How to correct header alignment in HTML for Google Table

Utilizing the google visualization table to generate a html table, I have successfully fixed the top section of the html using the stuckpart div. This ensures that regardless of how I scroll, the button remains in place. However, I now aim to fix the table ...

javascriptjqueryhtmlcssgoogle-visualization

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

javascripthtmlcssvue.js

Reveal each element individually upon clicking the button

I am trying to display 5 div elements one by one when clicking a button, but the current code is not working. I am open to alternative solutions for achieving this. Additionally, I want to change the display property from none to flex in my div element. ...

javascripthtml

Substitute placeholders in the HTML code with Angular syntax

Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...

javascripthtmlangularjs

reduce opacity of specified div background

Objective / Purpose I am working with multiple div elements and I want to assign two distinct classes to each of them, each serving a different purpose within my application. One class should determine the level, influencing the color of the div. The oth ...

.netcsslessdotless