Dimensions of div tags that are nested within each other

Question

Dimensions of div tags that are nested within each other

I have a container div that contains three inner divs, each with a width of 33%. When they don't have borders, they align perfectly in line.

However, when I add a 1px border to each of the inner divs, it causes them to go out of alignment and pushes the third div below the other two.

Is there a way to keep the three inner divs perfectly aligned within the container while still using borders to highlight each one?

You can view an example demonstrating the issue on JSFiddle by following this link: https://jsfiddle.net/p0yzrL0j/

Second query:

How can I ensure that the sizes of the divs remain fixed so that whenever the window is resized, the divs shrink or expand to fit the window size instead of stacking on top of each other?

javascript html css nested

Answer 1

Answer №1

Here is a demo I created showcasing the implementation of

box-sizing: border-box;

https://jsfiddle.net/62n4d51e/1/

You have the ability to adjust the border size without affecting the overall width of the element.

Answer 2

Here is a demo I created showcasing the implementation of

box-sizing: border-box;

https://jsfiddle.net/62n4d51e/1/

You have the ability to adjust the border size without affecting the overall width of the element.

Answer 3

Answer №2

If you want to ensure that the total width and height of a box includes any border and padding, you can use:

box-sizing: border-box;

This CSS property is useful for including the border and padding in the overall dimensions of an element. You can find more information about it at this W3C Reference.

Many grid systems utilize universal selectors to apply this style, such as:

*,after,before {
    box-sizing: border-box;
}

Answer 4

If you want to ensure that the total width and height of a box includes any border and padding, you can use:

box-sizing: border-box;

This CSS property is useful for including the border and padding in the overall dimensions of an element. You can find more information about it at this W3C Reference.

Many grid systems utilize universal selectors to apply this style, such as:

*,after,before {
    box-sizing: border-box;
}

Answer 5

Answer №3

Another option is to avoid using "box-sizing: border-box;"

You can utilize the calc() function.

If your boxes have a 1px border, it will add 1px to both the left and right sides. Therefore, you need to subtract 2px from the 33% width.

#stats {
    width: calc(33% - 2px);
}

Answer 6

Another option is to avoid using "box-sizing: border-box;"

You can utilize the calc() function.

If your boxes have a 1px border, it will add 1px to both the left and right sides. Therefore, you need to subtract 2px from the 33% width.

#stats {
    width: calc(33% - 2px);
}

Answer 7

Answer №4

By utilizing the calc function in CSS, I managed to automatically adjust the width of a div by subtracting border widths from the total width, ensuring it adapts seamlessly to any screen resolution.

.one{
 width:33%;
 height:100px;
 border:1px solid red;
 float:left;
}
.two{
 width:-webkit-calc(34% - 7px);
 width:-moz-calc(34% - 7px);
 height:100px;
 border:1px solid blue;
 float:left;
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution

<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>

Answer 8

By utilizing the calc function in CSS, I managed to automatically adjust the width of a div by subtracting border widths from the total width, ensuring it adapts seamlessly to any screen resolution.

.one{
 width:33%;
 height:100px;
 border:1px solid red;
 float:left;
}
.two{
 width:-webkit-calc(34% - 7px);
 width:-moz-calc(34% - 7px);
 height:100px;
 border:1px solid blue;
 float:left;
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution

<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>

Dimensions of div tags that are nested within each other

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Determine the worth of various object attributes and delete them from the list

Header should elegantly glide up and down as the user scrolls through the page

Leveraging AJAX to access a PHP file

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

Incorporating Past Projects into an Angular 2 Website

Error: The function of _data__WEBPACK_IMPORTED_MODULE_3___default.a.map is not executable

Eliminating unnecessary CSS classes

Formatting Date and Time in the Gridview of my Asp.net Application

Encountered an issue with mapping data from a controller to a view in Angular.js

Unable to view Chart.js on the second tab

Implement an onchange function in the selected jQuery plugin for a WordPress website

What is the best way to send a prop from a parent component to its child using context in React?

Retrieve the file path of an uploaded image in a Razor view using jQuery Ajax

PHP Loop to Dynamically Generate Exploded Checkboxes

Toggle between light and dark mode with React

Determine line-height and adjust positions using JavaScript in the Chrome browser

When using the require() function in Node.js, the period "." is not being recognized as part of the command and

Ways to output HTML from a function

Are the CSS flow arrows suffering from poor formatting?

What is the best way to extract specific values from these JSON objects?