Why setting padding makes two horizontal div vertical? [duplicate] - html

Question

This question already has answers here:
Why does CSS padding increase size of element?
(6 answers)
Closed 2 years ago.
If i remove padding from below code two vertical div became horizontal, Why this is happening because as far as i know padding affects internal spacing. I am expecting two horizontally aligned divs from below code
<style>
#wrapper {
width:100%;
margin : 0;
}
#first-div {
width:50%;
margin : 0;
float : left ;
padding: 10px;
background-color: green;
color: white;
}
#second-div {
width:50%;
margin : 0;
float : left ;
background-color: blue;
color: white;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="first-div" >
First div content here...
</div>
<div id="second-div" >
Second div content here...
</div>
</div>

Answer 1

<div id="wrapper">
<div id="first-div" >
First div content here...
</div>
<div id="second-div" >
Second div content here...
</div>
</div>
<style>
#wrapper {
width:100%;
margin : 0;
}
#first-div {
width:50%;
margin : 0;
float : right ;
padding: 10px;
background-color: green;
color: white;
box-sizing: border-box;
}
#second-div {
width:50%;
margin : 0;
float : right ;
background-color: blue;
color: white;
padding: 10px;
box-sizing: border-box;
}
</style>
You should said your div box-sizing as border-box
than it take padding after border internally.

Answer 2

It is because you are keeping the width at 50% and the extra padding is added additionally to that width making the element collapse to a new line (due to float: left)
This should not happen if you apply box-sizing: border-box to each div. This ensures that padding is included within the width of the element

Answer 3

try to use display flex instead float:
#wrapper {
width:100%;
margin : 0;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
#first-div {
width:50%;
margin : 0;
background-color: green;
color: white;
padding: 10px;
}
#second-div {
width:50%;
margin : 0;
background-color: blue;
color: white;
padding: 10px;
}