Is it possible to dynamically convert percentages to pixels in real-time?

I am working on a project with a fluid percentage-based horizontal grid and I want to have the same vertical margins as my horizontal ones.

This is the code I have:

.block_12_24{
display:inline-block;
vertical-align:top;
width:48%;
margin-right:2%;
margin-left:0;
/* Now I want the margin-top to be the same as margin-right: */
margin-top: 17px; //instead of that
}

Now, I am looking for a way to make the margin-top value equal to margin-right. I am thinking of recalculating the 2% into an absolute value like pixels and then assigning that value to margin-top. I don't want to keep checking it manually, so I am considering using JavaScript to achieve this:

  1. Setting margin-top to a rough value like 17px
  2. Allowing the page to load
  3. Using JavaScript to check the browser's width in pixels
  4. Calculating a new margin value based on that width
  5. Adjusting the margin-top of .block_12_24 accordingly

Is there a way to achieve this using only CSS? Thanks

htmlcsssass

Answer №1

By always setting the margin based on the window size (so your document doesn't horizontally scroll), you can utilize viewport percentage values vw instead of traditional percentage:

margin: 2vw;

This will apply the margin for all sides according to the width.

The support for this technique is widely adopted across browsers.

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 custom switch input with a blue outline is reluctant to vanish

Hey there! I'm currently using Bootstrap and I'm facing an issue with removing the blue outline around a custom switch button when clicked. I've tried to remove it using CSS but it doesn't seem to work, especially in Chrome. Here's ...

htmlbootstrap-4

What is the best way to zip two arrays of different lengths so that they can be looped through in a Django

Two arrays are at my disposal: First array: ['Tan','Goh','Tio'] Second array: [['Honda','Toyota','Proton'],['Toyota'],['Proton','Lambo']] Is there a way to merge ...

pythonarraysdjangohtml

Issue encountered in SQL PHP form script at line 23

I'm currently working on some code to insert data into different tables, but there seems to be an issue on line 23. This code is part of a college project registration form. <?php $con = mysql_connect(","",""); if (!$con) { die('Could not c ...

phphtmlsql

POST method error 400 encountered

Whenever I execute my ajax jquery function, I encounter a 400 error Here is my code. All Postman tests pass successfully, but when the web app runs, it fails. I'm not sure if it's a coding issue or something related to HTML5. Can anyone offer as ...

javascriptjqueryajaxhtml

Display the information stored in an array onto the console using console.log in Angular with Typescript

.html file <div class="container" *ngFor="let info of (this.info || [])"> <h5 class="card-title" (click)="getInfo()">{{info.paragraph1}}</h5> </div> .ts file getInfo () { *****console.lo ...

htmljsonangularconsole.log

The distinct advantages of utilizing both HTML and PHP together in web development

What is the difference between using HTML code within PHP code and PHP code within HTML code? Does it impact performance? ...

phphtml

Ways to determine the height of a row within a flexbox

Is it possible to obtain the height of each row within a flexbox container using JavaScript? For instance, if there are 3 rows in the container, can I retrieve the height of the second row specifically? ...

javascripthtmlcssflexboxrow

What is the method for determining the number of unique tags on a webpage using JavaScript?

Does anyone have a method for determining the number of unique tags present on a page? For example, counting html, body, div, td as separate tags would result in a total of 4 unique tags. ...

javascripthtml

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

javascriptangularjshtmltwitter-bootstrapangularjs-directive

Having trouble resizing divisions using three.js?

Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...

cssthree.js

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

javascriptjqueryhtmlnode.js

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

javascripthtmlcssuisearchbargoogle-custom-search

I came across a wlwmanifest.xml file while browsing through the source directory of my website

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="../preload/wlwmanifest.xml"> I am curious about the purpose of including this code in my website. If I were to delete this file, how would it impact the f ...

htmlcsswordpressweb-frontend

Sending a parameter to the window.onload callback function

Is there a way to pass parameters from ModelAndView to a window.onload function in JavaScript within an HTML file? Here is an example of how it can be done: @RequestMapping(value = "/admin/printtext") public ModelAndView printtext() { ModelAndView mo ...

javascripthtmlspringspring-boot

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...

jquerycss

What is the best method for inserting a URL link using jQuery within a CSS element?

Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...

javascripthtmlcsshyperlinkhref

The issue of the Dropdown Menu Not Remaining Fixed While Scrolling

There is a challenge with a Datetime Picker Dropdown Menu not staying in place when the user scrolls. Previous attempts to use .daterangepicker {position: fixed !important;} have been unsuccessful, causing the Datetime Picker to not stay fixed in its posit ...

jqueryhtmlcssdrop-down-menudatetimepicker

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...

htmlcss

Is it possible to change the src attribute after the page has loaded and execute it

A. I'm trying to figure out how to dynamically change the src attribute of an image using JavaScript after the page has loaded. <img src="http://example.com/image.png" /> to <img src="http://domain.com/different.jpg" /> B. Another questi ...

javascriptjqueryhtml