Navigating size measurements in percentages and pixels to achieve flawless alignment

Question

Navigating size measurements in percentages and pixels to achieve flawless alignment

Utilizing the calc property in a solution, I am facing challenges when trying to calculate the percentage width of an element with margins, padding, and borders set in pixels.

Take a look at this demo:

#form {
    margin: 200px auto;
    width: 360px;
    background:green;
    padding:0
}

 input[type="text"], input[type="password"] {
    width: calc(50% - 42px);
    margin: 10px;
    padding: 10px;
    border: solid 1px #000;
}

The form contains two inputs, and I aim for them to completely fill their parent div. My formula is:

100%= (input_width + ( margin_width + padding_width + border_width ) * 2 ) * 2

=> input_width= 50% - 42px

However, currently, the maximum width I can use is 50% - 45px to keep both inputs on the same line. What am I missing? http://jsfiddle.net/uL2syf4m/3/

html css

Answer 1

Answer №1

The issue arises from the excess white space caused by your HTML structure and how it interacts with inline-block elements. By removing the line breaks and extra tabs between your input tags, you will be able to effectively apply the desired CSS rule width: calc(50% - 42px);. For more information and insights, refer to this detailed article HERE

You can view a working example in this FIDDLE

Answer 2

The issue arises from the excess white space caused by your HTML structure and how it interacts with inline-block elements. By removing the line breaks and extra tabs between your input tags, you will be able to effectively apply the desired CSS rule width: calc(50% - 42px);. For more information and insights, refer to this detailed article HERE

You can view a working example in this FIDDLE

Answer 3

Answer №2

To achieve the desired outcome, you must ensure that they are floating properly.

#custom {
    margin: 20px auto;
    width: 280px;
    background-color: blue;
    padding: 0;
}
#custom::before, #custom::after{
    content: " ";
    display: table;
    clear: both;
}

input[type="email"], input[type="password"] {
    float: left;
    width: calc(50% - 32px);
    margin: 8px;
    padding: 8px;
    border: solid 1px #000;
}

<div id="custom">
	<input type="email" id="field1"/>
    <input type="password" id="field2" />
</div>

For further reference, please visit the jsfiddle below:

http://jsfiddle.net/aB4d7cW1/9/

Answer 4

To achieve the desired outcome, you must ensure that they are floating properly.

#custom {
    margin: 20px auto;
    width: 280px;
    background-color: blue;
    padding: 0;
}
#custom::before, #custom::after{
    content: " ";
    display: table;
    clear: both;
}

input[type="email"], input[type="password"] {
    float: left;
    width: calc(50% - 32px);
    margin: 8px;
    padding: 8px;
    border: solid 1px #000;
}

<div id="custom">
	<input type="email" id="field1"/>
    <input type="password" id="field2" />
</div>

For further reference, please visit the jsfiddle below:

http://jsfiddle.net/aB4d7cW1/9/

Navigating size measurements in percentages and pixels to achieve flawless alignment

Answer №1

Answer №2

Similar questions

What are the best strategies for aligning the content on the front page of my website?

Creating a customized notification icon featuring a count of notifications

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

The sub-menu options are constantly shifting... How can I keep them in place?

Move the cursor within the text area upon clicking the button

What is the proper way to include a URL when submitting an AJAX form?

Creating an icon on the right side of a Bootstrap panel: A step-by-step guide

Upon loading the page, IE11 activates a CSS transition even when a media query that is not applied is present

Unable to make the Show/Hide Loading GIF function work as intended

text/x-handlebars always missing in action

Using the select tag in Rails with Blueprint CSS

Having trouble with my navbar toggler arrow malfunctioning

Is it possible to implement addEventListener.delay() functionality?

What is the best way to ensure only one item is being selected at a time?

Unable to properly display the message in Angular

Eliminating unused CSS space on a website

Tick the box to activate the ability to uncheck multiple boxes when there are already a certain number of boxes checked

Unlock the power of nested dynamic content creation with JavaScript

Implementing dynamic width with ng-style in AngularJS

What is the best way to customize the label of Material UI's Tab component?