Is it not possible for calc to determine the width of the parent div?

 body{width:400px;}
.bd{ padding:0 50px 0 80px; height:100px; }
.middle{ float:left; width:100%; height:80px;background:blue; }
.left{ float:left; width:180px; height:80px;background:#0c9;margin-left:-320px;}
<div class="bd">
  <div class="middle">middle</div>
  <div class="left">left</div>
</div>

The calculation for the 100% width of bd1 is (400-50-80)=270px, and adding 50 gives us a total of 270+50=320px, which is why we have
-calc(100% + 50px)=-320px.
The question arises as to why margin-left:-320px; cannot be modified to margin-left:-calc(100% + 50px);?

htmlcss

Answer №1

When working with CSS, remember that the syntax margin-left: -calc(100% + 50px); is not permitted. It is advisable to use margin-left: calc(-100% - 50px); instead.

Answer №2

Utilizing Margin-Left Property:

 margin-left:calc(-100% - 50px);


 body{
    width:400px;
}
.bd1{ 
    padding:0 50px 0 80px;
    height:100px; 
 }
.middle1{ 
    float:left; 
    width:100%;
     height:80px;
     background:blue; 
 }
.left1{ float:left;
 width:180px; 
 height:80px;
 background:#0c9;
 margin-left:calc(-100% - 50px);
}
<div class="bd1">
  <div class="middle1">mid</div>
  <div class="left1">left side</div>
</div>

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

Disabling the movement of arrows in the client-testimonials-carousel plugin

This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...

javascriptjqueryhtmlcss

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

Unraveling a collection of HTML tags using Python's Beautiful Soup library

Need help parsing HTML code using Python Beautiful Soup. Trying to extract images along with their width and height properties, if available. The following code snippet indicates there are three images on a page: the first image is 300x300, the second has ...

pythonhtmlbeautifulsoup

What is the best way to retrieve all form input values by utilizing the blur event within the `addEventListener` method

I'm currently attempting to retrieve form values dynamically using addEventListener, but I'm only able to access the first input field and not the others. Below is my current code snippet: $(document).ready( function() { const user_inpu ...

javascripthtmljquery

viewing a TIFF file in Internet Explorer

Are you able to view Tiff images in Internet Explorer, similar to how BMP files can be opened in IE? When I attempt to set an iframe source as a tiff image, it prompts a download dialog. I am looking to show the tiff image within an IE page. Below is an e ...

htmltiff

Hide the border below the active tab

Could anyone assist me in removing the border below the selected tab? I've attempted multiple approaches without success. I experimented with adding a negative margin to the tab and creating a white border, but as the border I want to conceal is from ...

jquerycss

Creating dynamic web content using KaTeX and Node.js

When I attempt to display a complex formula using HTML and CSS, I encounter difficulties. Instead of the desired output, my screen is filled with confusing unicode characters. To resolve this issue, I decided to use KaTeX. I downloaded KaTeX into the dire ...

javascripthtmlnode.jskatex

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

jqueryhtmlformsjquery-selectors

Why is this dropdown list extending beyond the window?

Why is my dropdown list extending beyond the window? Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue! I am unable to figure out why the list is going off the page. Your help in solvin ...

jqueryhtmlcss

Having trouble displaying the :before element on a ReactiveForms input

Is anyone else experiencing difficulty displaying a FormControl on a form to hold a telephone country code prefix with a plus sign always visible in the left-padding area? I attempted to use a :before element on the input, but even after inspecting in DevT ...

cssformsangular

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Background image vanishes after the second invocation of Codeigniter View

Currently, I am working with codeigniter and have successfully set a background image for my home page. However, when I call the view explicitly from another function, the background image disappears while everything else remains unchanged. In my header_v ...

phpcsshtmlcodeigniter

Complete the table until it reaches the available space, making sure to maintain the header and footer

In my live page, I have a section that has limited space based on the viewport size. The layout includes: Content above the table Table with Header and Body Content below the table Currently, the section overflows due to having too many items in the tab ...

htmlcss

What is the method for setting a video as the background of my div?

I've been trying to set a Youtube video as the background of my div. After researching online, I found that many people followed these steps: Welcome Easy to use. S ...

htmlcss

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss

Can you determine the measurements of the combined image's height and width?

Here is my code: for(var i=1;i<10;i++){ $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>'); $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i ...

javascriptjqueryhtml

Trouble arises when attempting to delete rows from my database with the use of HTML, PHP, and

I am developing an application where I have implemented this table: <?php require_once 'Connect2db3.php'; ?> <form> <fieldset> <article class="rondehoeken"> <header> <div class="streep1"></div& ...

phpjavascripthtml

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

csshtml

What is the best way to conceal an image generated by a control - using JavaScript, CSS, or another method?

I am looking to remove the background image of the ReportView control, specifically the toolbar_bk.png image. Rather than hiding it, I want to set it to none. How can I achieve this easily? Should I use server-side code, CSS, JavaScript, or perhaps jQuery ...

javascriptjquerycssreportviewerserver-side

Can a linked checkbox be created?

Is it possible to create a switch type button that automatically redirects to a webpage when turned on by clicking a checkbox? I'm working on implementing this feature and would like to know if it's feasible. ...

javascripthtmlcss