Padding on div changes height and width of parent container - html

Question

I was wondering if there is an alternative method to achieving the results shown in the attached picture. I used absolute positioning to get .resume-icon-container to sit flush with .resume-container.
Every time I tried to add padding or height/width to .resume-icon-container it would undesirably resize .resume-container. I experimented with overflow: auto and the z-index but the only way I could achieve the results I want is with absolute positioning and adding margin-left to position it then padding and font-size to make it flush with .resume-container. I was browsing similar questions as well and someone said to add box-sizing: border-box but I already declared that setting in my CSS reset under the * selector.
I would prefer to stay away from absolute positioning for responsive purposes, so I was wondering if there is another way to achieve what I want.
This is the desired result:
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
position: absolute;
margin-left: 268px;
border-radius: 20px;
font-size: 10px;
}
.resume-icon-container i {
color: #fff;
}
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>

Answer 1

Remove the absolute positioning and padding and use margin-left on your h1.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
margin-left: 1em;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
border-radius: 20px;
}
.resume-icon-container i {
color: #fff;
width: 100%;
}
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>

Answer 2

The way you are tuning those margins and paddings, you will always be looking at something different depending on the size of the screen. You need to use relative positioning so that the items appear on the screen the same regardless of the number of pixels. It can also get confusing to mix margin with padding. Margin will push the element from its nearest element while padding will push elements inside that element away from the left,top,etc.
I like to start by creating a container for each element so that we can design each new div element like its own page.
Consider the following code:
<div id="View">
<div id="OptionBlock">
<div id="Options1">
<div id="AddDocument" class="options">Add New Document<div id="DocumentIcon"></div></div>
<div id="AddTemplate" class="options">Add New Template<div id="TemplateIcon"></div></div>
</div>
<div id="Options2">
<div id="ChangeSignature" class="options">Change Your Signature<div id="SignatureIcon"></div></div>
<div id="Settings" class="options">Settings and Subscription<div id="SettingsIcon"></div></div>
</div>
</div>
</div>
#View {
width: 100%;
height: 60%;
}
#OptionBlock {
width: 100%;
}
#Options1 {
width: 100%;
float: left;
}
#Options2 {
width: 100%;
float: left;
}
#AddDocument {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-left: 24%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
#AddTemplate {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-top: 2%;
margin-right: 24%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
Notice how I treat the outer boxes as large containers, defining all the total width and height we need, then leaving it to the css for particular elements showing content to position themselves within that container on the screen. The width and left and right margins of elements #AddDocument and #AddTemplate add up to 100% width so that the entire box it is placed in is accounted for.
Preview CSS Placements (this renders dead center at the top of the webpage)

Answer 3

It's just a matter of playing with the css.
For this kind of "trial and error" problem you should use CodePen or similar. It'll make your life much easier.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
/* padding: 20px;*/
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
padding: 20px;
margin: 0;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
float: right;
/*margin-left: 268px;*/
border-radius: 20px;
/*font-size: 10px;*/
height: 100%;
}
.resume-icon-container i {
color: #fff;
}
.bi {
font-size: 2rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
<i class="bi bi-file-earmark-text"></i>
</div>
</div>