What is the best way to set the CSS for an input box's width as a percentage when there is both a border and padding applied?

Imagine a scenario where you have a container that is 500px wide. Inside this container, there is a label that takes up 30% of the width and an input box that occupies 70% of the width. Logically, everything should fit perfectly, right? But here's the catch - the input box has a border on the left and right sides, along with padding, which makes it 6px wider than intended.

One possible solution is to adjust the width from 70% to 68%, but this workaround feels a bit hacky. Is there a more elegant way to resolve this issue without resorting to a complete CSS reset?

Here is the snippet of CSS code causing the problem:

#my-container { width: 500px }
#first-name-label { display: inline-block; width: 30% }
#first-name { display: inline-block; width: 70% }

Below are some examples illustrating the issue:

  1. Example 1: outerWidth 356 (input box debug console)
  2. Example 2: outerWidth 351
  3. Example 3: outerWidth 349
  4. Example 4: outerWidth 349
  5. Example 5: input box goes beyond container width
htmlcssforms

Answer №1

The reason for the inaccurate width measurement is due to the default setting of box-sizing:content-box;. When calculating the width and height in CSS, the border and padding are factored outside of that calculation, resulting in additional space even with width:100%;. To address this issue, simply set the element containing the border to box-sizing:border-box;, bringing both the border and padding inside the width and height calculation.

Give this a try:

#my-container { width: 500px; }
#first-name-label { display: inline-block; width: 30%; }
#first-name {
   display:inline-block;
   width: 70%;
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

For a more targeted approach specifically for text inputs, use this code:

input[type=text] {
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

CSS Syntax:

box-sizing: content-box|border-box|initial|inherit;

Browser Compatibility:

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

For further insight on this topic, check out this informative article on box-sizing:

http://css-tricks.com/box-sizing/

http://css-tricks.com/almanac/properties/b/box-sizing/

Answer №2

What are your thoughts on trying out a design like this: http://example.com/design-sample/

#content-wrapper { width: 800px }
#title-label { display: inline-block; width: 20% }
#title-input { display: inline-block; width: 80%; margin: 0 -5px;}

Answer №4

Do you have any experience with the 

border-style: hidden

property?

This feature is designed to alleviate border conflicts in table components, similar to the issue you're facing.

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

Contrast the objects in views.py between two distinct model objects in Django

I am currently working on a feature that compares the skills required for different job postings (such as web development, marketing, etc) with the skills of a user who is logged in. If there is a match, the job posting will be displayed to the user. The ...

pythonhtmldjangodjango-viewscompare

Spring Security 3 does not support the use of static resources

I am facing difficulty in configuring static resources (such as js, css, images) in spring security 3. Here is my configuration file: <beans xmlns="http://www.springframework.org/schema/beans" xmlns:security="http://www.springframework.org/schema/s ...

javascriptcssimagespring-mvcspring-security

Changing the file format from FLV to MP4

After using the mencoder software, I successfully converted the flv files to mp4 format by executing the given command: mencoder input.flv -o outout.mp4 -of lavf -oac mp3lame -lameopts abr:br=56 -ovc lavc -lavcopts vbitrate=800:mbd=2:mv0:trell:v4mv:cb ...

htmlmencoder

Switch between two checkbox options by simply clicking on one without the need for JavaScript

Is there a way to select two combined checkboxes with one click? I have a small calendar where I need to mark weeks using checkboxes. Since one week can fall into two months, I have created duplicates of the same checkbox for each week. Is there a safe wa ...

htmlcheckboxcross-browser

What factors does Google Web Fonts consider when determining which font version to serve to my browser?

I recently came across information stating that "Google Web Fonts does its best to ensure proper versions are served, but sometimes discrepancies can occur between browsers and operating systems." My intention is to incorporate the following CSS code: fon ...

htmlcsswebfontsgoogle-webfonts

Why does my JavaScript code only function properly on the initial div element?

I want to create a JavaScript function that changes the color of the title when I hover over an image. It seems to be working, but only for the first div. Could it be an issue with my scoping? Thank you! <body> <div> <a href="" i ...

javascripthtmlcss

How to show specific information for individual items using Angular

In my current project, I am utilizing angular 7 and bootstrap 4. My goal is to display detailed information right below the selected item. The screenshot below shows where I'm currently at: https://i.sstatic.net/su9tI.jpg Here is what I aim to achie ...

angularcssbootstrap-4

Using a CSS style to modify a class based on another class at the same level in the hierarchy

I am working with a jQuery carousel that is adding an 'active' class to images within a div. Within the same div, there is also a span with a 'fade' class that has a CSS style of opacity: 0. Is there a way to change the CSS style of the ...

javascriptjquerycss

Creating a fully rounded input group using Bootstrap 4

I'm struggling to round my input group like the example shown in this template. Currently, my output looks like this: my example. This is my code: .eersteKnop{ color: #d32721; background-color: white; } .btn{ font-family: 'LatoLight&ap ...

htmlcssbootstrap-4

Content creator: Enhancing HTML search functionality using parameters

Hey there, I'm facing an issue. I created a template on my Blogger site and I need to search for text with a specific label using this URL: www.my_blog.blogspot.com/search?q=label:Printers+SearchText This is the code I have: <form action=&ap ...

htmlblogger

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

What is the most effective method for establishing functions in AngularJS?

Hey there, I'm currently working on a function in AngularJS and I'm not sure what the best practice is for defining methods. Any suggestions would be greatly appreciated. Option 1: var getBranchKey = function(currentBranchName) { }; Option 2: ...

javascriptangularjshtml

Alter the value of a parameter within a script tag with JavaScript/jQuery

Looking to dynamically change a parameter value using JavaScript or jQuery. Here is an example URL: www.exampleurl.com/somepage?foo=test I have a function that can extract the value after the 'foo' parameter: function getParameterByName(name, ...

javascriptjqueryhtml

Tips for achieving vertically centralized components with uniform height columns in Bootstrap 4

I tried implementing the solution provided in this question: Bootstrap 4 vertical center - equal height cards However, I am still facing an issue. Despite applying the suggested code: <div class="cycle-des h-100 justify-content-center">Product Cycl ...

cssbootstrap-4

Is it possible to modify the year in the bsDatepicker to a different value?

Currently in my TypeScript code, I am importing the { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; Here is the HTML code snippet I have: <div class="col-xs-12 col-12 col-md-4 form-group"> <input type="text" placehold ...

htmlangulartypescriptvisual-studiongx-bootstrap

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...

javascripthtmlangularjstwitter-bootstrapbutton

Input field with ruled lines beneath each line of text

Can you assist in creating a textarea that displays lines under each row of text similar to the example shown in the image below? ...

javascriptjqueryhtmlcss

The issue of PHP not being executed when using HTML AJAX

I am completely new to using AJAX, jQuery, and PHP. I am currently working on a project where the user can submit their daily weight which is then stored in a database and later displayed with graphs. My issue is that when the user submits the form with t ...

phpjqueryhtmlajax

How can I center a button instead of using "margin-left: 0" when its location changes on a smaller screen?

Website: When viewing the website on my desktop, the text over the top image - "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button - "Get involved" are aligned to the left with a 10% margin. However, on a ...

csswordpressbreakpoints

Is there a way to display a dollar sign either inside or before the input box?

I'm looking for a way to include a "$" sign inside or before the input field where the user enters the hourly pay rate. Any suggestions on how to accomplish this? <tr> <td>Hourly Pay Rate</td> <td><input type = "number" nam ...

html