Creating a CSS sidebar that adjusts its margin as you zoom in and out

Question

Creating a CSS sidebar that adjusts its margin as you zoom in and out

I am currently working on designing a side bar that will feature buttons and other elements with text on the opposite side. Initially, when you open the page, the sidebar occupies 39% of the left side, which is functioning correctly. However, when zooming in, the sidebar should decrease in width, and when zooming out, it should increase in width. The issue arises when zooming in from the original browser position as the sidebar ends up extending too much to the right. Conversely, when zooming out, the sidebar shifts excessively to the left.

In essence, I want the sidebar to maintain its initial appearance as shown here: (View how it should always look)

Regardless of whether you are zooming in or out, it should preserve this original proportion. Nevertheless, when you zoom out, it appears like this: (View when zoomed out)

And when you zoom in, it looks like this: (View when zoomed in)

To address this, I require a solution involving code that adjusts the margin size by increasing it when zooming out and decreasing it when zooming in.

I apologize if this seems trivial. Thank you for your assistance!

html css resize

Answer 1

Answer №1

After some exploration, I have managed to come up with a solution for the issue at hand:

<html>
    <style>
* { margin:0; padding:0; box-sizing:border-box; }
#container {
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    padding:0;
}
#left {
    float: left;
    width: 51%;
    position: relative;
    left: -295px;
    padding:0;
}
#left2 {
    height: 240px;
    margin: 0;
    background: #F4F4F4;
    padding:0;
}

</style>

<div id="container">
    <div id="left"><div id="left2"></div></div>
</div>
</html>

Answer 2

After some exploration, I have managed to come up with a solution for the issue at hand:

<html>
    <style>
* { margin:0; padding:0; box-sizing:border-box; }
#container {
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    padding:0;
}
#left {
    float: left;
    width: 51%;
    position: relative;
    left: -295px;
    padding:0;
}
#left2 {
    height: 240px;
    margin: 0;
    background: #F4F4F4;
    padding:0;
}

</style>

<div id="container">
    <div id="left"><div id="left2"></div></div>
</div>
</html>

Creating a CSS sidebar that adjusts its margin as you zoom in and out

Answer №1

Similar questions

Is there a more efficient method for replacing all attributes on cloned elements?

Turn off the ability to click on images, but allow users to access the right

Is it possible that certain data (such as images) may not be accessible for web scraping?

How to create a captivating image effect using CSS on hover

Shuffling HTML content into sets of three rows

Having trouble with a jQuery selector that is supposed to target an element with both an id and

Implementing a breadcrumb-style back button using jQuery

Adding the </tr> element to a table does not seem to be registering

Why is it that when I store a DOM element reference in a JavaScript Array, I cannot reuse that stored reference to add an event listener

Modify styling of elements dynamically according to URL changes repeatedly without refreshing the page (requires AJAX functionality)

Utilize the tab functionality within AngularJS

What is the best way to remove the background from a button that uses -moz

The change in image is not being implemented

Tips for clearing the blue color box from inputs and buttons in bootstrap after they are clicked

Use $.ajax to display the menu by capturing an array of elements {0}

The backdrop of the Bootstrap modal popup refuses to disappear

Contact form in Bootstrap 5 lacks responsiveness

Hovering over an image causes the text to be displayed even when z-Index is

JavaScript onclick event triggers only the second audio to play

The setTimeout function executes immediately without any delay