Using the calc function to define input width may not yield the expected results

I am facing an issue where I have an input element with width: calc(100% - 100px); and no padding/margin/border. Next to this input, I want to place a div with position: inline-block; and width: 100px;.

The problem is that the div is going to the next line instead of staying beside the input. When I reduce the width of the div to 96px, it works fine. I am puzzled about what could be causing this missing 4px width!

It's important to note that the issue does not seem to be related to box-sizing: border-box, as there is no padding or border involved.

You can check out the Plunker link for testing in Chrome and Firefox.

htmlcsscss-positioncss-calc

Answer №1

To eliminate the white space between elements, you can utilize inline or inline-block display properties. These properties inherently maintain spacing between elements as they behave like inline text (similar to spaces between words or letters). An alternative method is to insert an HTML comment between the elements to avoid any undesired white space.

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><div style="width: 97px; display: inline-block">97 px Div</div>

or

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><!--
--><div style="width: 97px; display: inline-block">97 px 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

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

javascriptjqueryhtmlcsshtml-table

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

javascripthtml

A guide on detecting overflow in a React functional component

I am in search of a way to determine if a div contains overflowing text and display a "show more" link if it does. While researching, I came across an insightful Stack Overflow answer on checking for overflow in a div. The answer suggests implementing a fu ...

javascriptcssreactjsreact-forwardref

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

As I delve into my research, it's becoming apparent that achieving this result might not be feasible across all email clients. However, I'm curious to know if there have been any recent developments in the email world that would allow me to repli ...

htmlcssemailoutlookhtml-email

Implementing nested popup windows using Bootstrap

I am facing an issue with my two-page sign-in and sign-up setup in the header of my angular2 project. On the sign-up page, I have a link that should redirect to the sign-in page when clicked, but I am struggling to make it work. Can someone provide guidanc ...

javascripthtmltwitter-bootstrapangular

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

javascriptcssgoogle-chromegoogle-chrome-extension

Reorganize containers without relying on bootstrap styling

Is there a method to rearrange the order of two divs without using the bootstrap library? <div class='parent'> <div class='child-1'>Abc..</div> <div class='child-2'>Xyz..</div> </div> I ...

jqueryhtmlcssflexbox

What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code: var max=100; var spread=5; jQuery.each( $("img"), func ...

jquerycssmath

Executing function with ng-click in AngularJS only on the second click of the button

Currently, I am studying AngularJS and working on an exercise that involves using the ng-click function. Strangely, I am only able to view the result after clicking upload for the second time. I am trying to display my json content but it's not workin ...

javascriptjqueryhtmlangularjs

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

javascripthtmlcssdrop-down-menu

What is the method for calculating the 100% width of a flex child?

Adjusting the width of the .sidebar to 100% seems to make it smaller in size. Interestingly, removing the body's font-size: 1.3rem and toggling the .sidebar's width: 100% results in a slightly larger appearance. It is expected that setting the ...

htmlcssflexbox

What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...

cssmedia-queries

Issue with Custom CSS Class Not Displaying Correctly

I have implemented some unique CSS styles on a group of posts. You can view the site here. Upon inspecting the CSS classes of the posts, you will notice that the last two classes are .floats and .colThree. .colThree is being applied correctly with no issu ...

csshtml

Integrating Node.js with static HTML documents

I'm currently exploring methods for making node.js API calls from static HTML. While I've considered using Express and similar template engines, I am hesitant since they would require me to adjust my existing HTML to fit their templates. Typicall ...

javascripthtmlnode.jstemplatesexpress

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

javascriptjqueryhtmlcss

Tips for managing a virtual URL within an img tag

I have a situation where I need to protect the src value of an img tag to ensure server security. One recommendation I received is to use a virtual URL approach: In this scheme, the img tag references a virtual URL like /uploads/myuser/mypict.jpg which isn ...

phphtmlimageurlsymfony

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

javascripthtmlcss

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml

What is the process for creating a three-dimensional Bezier curve using JavaScript, specifically with three.js and WebGL?

I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...

javascripthtmlthree.js

What steps should I follow to ensure that the content for the back page is printed on the back page of a booklet when using paged.js?

In the case of a booklet printed from folded sheets, it is interesting to note that the number on the back page will always be divisible by 4. If the content does not have a multiple of 4 pages, then the back page will end up inside the booklet. For my cu ...

javascripthtmlcss