Div positioning calculation malfunctioning

How can I position the divs as described below? I want the left div to take up all available space except for 400 px which is designated for the div resource. Currently, the two divs are overlapping. If I set the width of both divs to 400px, there is a large white space on higher resolutions. What is the most effective solution for this?

<div id="left" style="position:absolute;top:0px;left:0px;width:calc(100%-400px);height:820px;background:#ececec;">
   <div id="map" style="position:absolute;top:0px;left:0px;width:calc(100%-400px);height:400px">Map goes here.</div>    
   <div id="asset" style="position:absolute;top:400px;left:0px;width:calc(100%-400px);height:420px;background:#ececec;">


   </div>
</div>
<div id="resource" style="position:absolute;top:0px;width:400px;left:calc(100%-400px);height:820px;background:#e6e6e6;">
   <table id="resourceHeading">
   </table> 
</div>
htmlcss

Answer №1

Have you considered utilizing a prefix?

-moz-calc
-webkit-calc
-o-calc

and so on...

Don't forget to add a space before and after the minus sign :)

calc(100% - 400px)

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 lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

After years of working with traditional compiled object-oriented languages like C++ and .NET programming, I decided to dip my toes into JavaScript for a new project. As I was experimenting with AJAX, I stumbled upon a perplexing aspect related to how objec ...

javascripthtmlajaxxmlhttprequest

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

Adjust Javascript Code to Modify Speed of Sine Wave Live

Feeling a bit lost here, but I need some assistance with a simple task. I'm trying to adjust the speed of a sine wave from 2 to 10 when a button is clicked. It seems like a small change, but for some reason, I can't quite figure it out. If you& ...

javascriptjqueryhtmlcsscanvas

Is there a way to connect two tables using CSS pseudo-selectors?

Is there a way to make two separate tables interact with each other using CSS pseudo-selectors? I have a data table and an auto-numbered table, and I want the rows to highlight in both tables when hovering over a cell in one of them. I've tried using ...

javascripthtmlcssreactjscss-selectors

The paragraph tag remained visible despite the use of the hidden display property

Can you help me figure out why my code isn't working with .d-none .d-sm-block? <div class="container"> <div class="row row-content align-items-center"> <div class="col-12 col-sm-12"> <h2>heading 1&l ...

htmlcssbootstrap-4display

Is there a way to exit PHP code automatically after a set time?

Is there a way to end my PHP code execution after 10 seconds? I've come across this piece of code, but it doesn't seem to work. set_time_limit(10); // This line is restricted by the server ini_set('max_execution_time', 10); ...

javascriptphpjqueryhtml

Tutorial on creating a loop for a function based on a specific condition

I have created two different div classes named box and box2. The box2 class can be dragged and dropped into any of the three box classes. Each box contains randomly chosen values from an array, while box2 contains its corresponding image for display. When ...

javascriptjqueryhtml

Choose from the dropdown menu and verify with a CAPTCHA

I am currently working on my website. I need help with implementing a dropdown menu that allows for selecting multiple options at once. Can anyone provide guidance on JavaScript validation and also captcha implementation? The current script only allows for ...

phpjavascriptjqueryhtmlcss

Is there a way to refresh my order hook in React JS?

I've been attempting to modify the values within my order hook, but for some reason, they aren't updating. I'm relatively new to React and can't figure out what mistake I might be making. Any insights? Take a look at my code snippet: ...

javascripthtmlreactjsreact-hooks

In JavaScript, it is necessary to determine if a checkbox is checked when modifying an input box

I have a table where each <td> contains an input box and a checkbox like this: <td> <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/> <input type="checkbox" id="summary" title="Check to set as Summary" / ...

javascriptjqueryhtml

The append method is not available for a div element

this is my unique code snippet for (i = 0 ; i< number ; i++){ var iDiv = document.createElement('div'); iDiv.innerHTML = "<label for=\"timeslot\" class=\"p-label-required\">Time Slot</label>" iDiv.i ...

javascriptjqueryhtml

The CSS properties of a div element include the :before pseudo-element with a "shape" style that does

Having trouble finding a way to neatly contain this circle inside the div without any overflow. Looking for an elegant solution! Example of desired outcome .wrapper{ background: #efefef; height: 250px; } .wrapper::before{ width: 300px; height: 300 ...

css

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

Is there a way to personalize the appearance of a specific page title in my navigation menu?

I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...

javascriptjqueryhtmlcsswordpress

Template for Ionic tabs with sliding animations

After downloading the Ionic tabs template, I spent some time experimenting with it. Now, I am curious about how to include a sliding function that smoothly navigates between tabs with animations instead of experiencing a sudden tab switch. On the Ionic Do ...

javascripthtmlcssionic-framework

Using Python to interact with website dropdown menus without relying on Selenium

Is there a Python library available that can assist me in opening a web page, selecting options from drop-down lists, and performing clicks without relying on Selenium? ...

pythonhtmldropdown

What is the most effective method for altering HTML form components using PHP?

Can you explain how to manipulate and add form elements using PHP? Let's say I have a form stored in a PHP variable like this: $originalForm = ' <form method="post" action="whatever.php"> <input type="text" name="iamtextfield" id="text ...

phphtmlregexdomxpath

Is it possible for a website to instruct a user's browser to save the entire page locally?

Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...

htmlhttpwebnext.jsnuxt.js

Triggering click events for multiple items in a loop using jQuery

I'm struggling to make a jQuery click function work for all items generated by a PHP while loop. Currently, it only works on the first iteration. I want to trigger a popup window to show a message to the user when they activate the click function. P ...

jqueryhtml

Is there a way to create tabs in JavaScript without having to edit the <head> section?

I am in need of JavaScript for creating tabs without the necessity of editing the <head> (as it is not possible). My requirement involves having three links and three divs. Whenever a link is clicked, one specific div should be displayed while the o ...

javascripthtmltabs