What is the best way to adjust the margins of my div based on the width of the webpage?

I have a website where I use two columns with modules to display information like this: https://i.sstatic.net/Jp97V.png

However, I work on vertical monitors and when I switch to a more landscape format, the layout looks like this: https://i.sstatic.net/DydKl.png

Here is the current CSS code I am using:

.module2 {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: cover;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    .module2inside {
        width: 90%;
        height: 75%;
        top: 20%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

The module2inside represents the translucent inside with the actual content, and module2 is the background to it. Module2inside is just a div inside module2. How can I ensure that the inside stays underneath the cutout area regardless of the width of the page?

htmlcss

Answer №1

To create a more stable layout, it's advisable to replace the percentage values with fixed pixel values. For instance, you can set a specific margin-top value in pixels like so:

    .block {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: 100% auto;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }    
    .block-inner {
        width: 90%;
        height: 75%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        margin-top: 100px;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

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

The battle between Typography and HTML formatting elements

When it comes to choosing between the <Typography/> tag and normal HTML tags like <p>, I find myself in a state of ambiguity. <Box className={someClassName}> <Typography>{someVariableName}</Typography> </Box> or <p ...

htmlcssreactjsmaterial-ui

Unable to retrieve field values from Firestore if they are numeric rather than strings

I need to display this information in a list format: li.setAttribute('data-id', updatesArgument.id);//'id' here unique id Example 1 name.textContent = updatesArgument.data().count;// Works if String Example 2 let i=1; nam ...

javascripthtmlfirebasegoogle-cloud-firestore

Why is the div still displaying with the same id and class even after postback in a partial view using MVC?

Encountering a issue where the partial view is repeating after post back, despite the functionality working correctly. Here is the code snippet from the View: @using (Ajax.BeginForm("MarkDefiniteDischargePatient", "PDDD",new { }, new Aja ...

jqueryhtmlcssasp.net-mvc

Stacking components on top of one another using CSS

I have been experimenting with a dynamic sliding jQuery menu. By adjusting the drop-down area slightly upward using a negative margin, I was hoping to layer the dropdown on top of its parent element that triggers the action. I attempted using z-index witho ...

jqueryhtmlcss

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

IE compatibility problem with the alignment of input group buttons and textboxes in Bootstrap v4

Encountering an issue with input group in IE while using bootstrap v4, working fine in Chrome. Specifically using IE 11 Here is my plunkr: input group bootstrap v4 Chrome display: https://i.sstatic.net/yXtEW.png IE display: https://i.sstatic.net/WiRz ...

csstwitter-bootstrapbootstrap-4

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

javascriptjqueryhtmlcss

Lineup of pictures aligning with the consistent left margin of surrounding content

I am looking to create a row of images that aligns with the same margin-left as other content on my webpage, similar to the title in the example image provided. This row of images should scroll horizontally and extend all the way to the edges of the page. ...

htmlcssflexboxoverflowmargin

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

htmlcss

Leverage Angular variables within HTML tags

Below is the code in my controller.js file: $scope.animatt = 900; and here is the corresponding html code: <div id="properties" data-{{animatt}}="left:100%;top:10%;"> <h2>all numeric properties</h2> </div> I am t ...

c#angularjsasp.net-mvchtml

Ways to enlarge an image while hovering the mouse over it without disrupting the positions of other images (JQuery)

Is there a way to achieve a similar effect to Google Images, where the image pops and comes in front when we mouse over it without affecting the positions of other images? This should only happen when the cursor is still and not moving around randomly. I ...

jqueryhtmlcss

problems with an extra administrator account access

Is it possible to have a single login form that can cater to both users and admins? I currently have a user login system in place but would like to add an admin login as well. How can I implement this without creating separate logins? if(isset($_POST[&ap ...

phphtml

Generate a unique border using jQuery randomization techniques

I've been experimenting with creating a random number and having the border-radius of my div change on every pageload: <script> $(".card-body").each(function(){ var rand = Math.floor(Math.random() * 100) + 1; $(this).css( { borderRadius: rand ...

jquerycsshtmlbootstrap-4

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

What is the limit for table size in HTML5 Web SQL DB?

Currently, I am in the process of developing a rather intricate HTML5 web app that obtains its data from a Web Service to populate the Web SQL database. Initially, everything was running smoothly with test data. However, when I attempted to use actual dat ...

sqlsqlitehtmlgoogle-chromewebkit

Show the latest outcome across several tables in Django

I am currently working on a Django project where I need to display the most recent result from multiple tables. This means that my page will contain several Divs, each showing the value and time of the latest entry in a specific table. Below is some initi ...

pythonhtmlmysqldjango

Sliding Dropdown Menu with Dynamic Title Change Upon Selection

I'm having an issue with a dropdown menu on hover that slides down and then back up. The active list item serves as the title of the dropdown. When a user clicks on an <li>, it becomes active and receives the class active-markup-style which sets ...

jqueryhtmlcss

Validation of multiple textboxes can be achieved by utilizing either JavaScript or Angular 1

How can I implement a validation in Angular 1 or JavaScript that will enable the submit button only when there is text in any of the 3 textboxes? If no text is present, the button should be disabled. Below is the code snippet: First name: <br> < ...

javascripthtmlangularjs

History.pushState is not a function that I utilize in my work

Can anyone assist me with implementing the history.pushState jQuery code? I am struggling to get it to work and I don't have much knowledge on how to do it. Any help would be greatly appreciated. Here is the code I have so far... <!doctype html> ...

jqueryajaxhtmlpushstate

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox