Making a rectangle within another rectangle and positioning elements - html

Question

I am trying to code a resume template just to learn the basics about HTML and CSS. However I have a problem when it comes to positioning a rectangle inside another one. I have been searching for hours and how to fix this but not sure why it isn't appearing at all. I wanted the rectangle to appear over the blue one but under the "Name" text as like a highlighting bar.
I believe it has to do with how I am positioning my elements. I tried using z-index as well but none of the changes I am making is working.
Also as a quick follow up, I wanted to know why I can't align the text "Name" in the center of my rectangle. I tried doing text-align:center but that doesn't do anything either. I feel like I am missing a major concept here with both of these problems. Any insight would be appreciated.
I pasted the code I am working with here: https://jsfiddle.net/Lx09fvcw/1/
Specifically this HTML part:
<svg class = "leftBar">
<rect id="leftRec">
<div class="Name">Name</div>
<div class = "icon">
<img src ="img/education.png">
</div>
</rect>
<rect id = "rightRec"></rect>
</svg>
As an edit I originally wanted a rectangle above another one like this: https://imgur.com/a/eOUGT8n
I am trying to align everything inside an A4 Size Page, but the blue rectangle has a gap between the leftmost part of the A4 page. Since I am not allowed to use absolute, I would just like some insight into how to do that because nothing is working that I am trying online. Not asking for someone to implement it for me but just show me the way as it is a bit confusing. Thanks for the help
Current code: http://jsfiddle.net/05p9qo7t/1/

Answer 1

Keep in mind you can't directly append div as a child to rect, circle, and path. You just can do it with foreignObject, but I strongly not recommend that way.
But if you insist on such a thing you can check the foreignObject documentation here.
If you want to create a resume template in another way I can share some code for you for better illustration.
EDIT:
Here is an alternative solution for what you looking for, check the code snippet below:
.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.right-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 100%;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.right-rect>span.name {
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.right-rect>span.name,
.container>div.right-rect>div.icon {
margin-top: 20px;
}
<div class="container">
<div class="right-rect">
<span class="name">Name</span>
<div class="icon">
<img src="img/education.png">
</div>
</div>
<div class="left-rect"></div>
</div>
NOTE: I just use 100vh and 100vw to fit every viewport, you can replace them with any suitable value.
Implementing left rectangle without position: absolute;
To avoid using position: absolute;, first of all, you should wrap all your element in your related parent, so you need to move
<div class="over-rect"></div>
and
<span class="name">Name</span>
to the related parent where in our case it is div with blue-rect class, then since we used pseudo-class styling we should modify some of our styles to make items fit the new position in the flow. After that we should get rid of position: absolute; and replace them with relative one.
This is optional and better for responsive designs in case you don't care about these stuffs you can keep up with absolute positioning.
But we also must do some modification in the flow with modifying the top element of items positioned relatively, so we add a top element to our style to move relative items with respect to their parent positioning.
Check out the code revises below:
body {
background: rgb(204, 204, 204);
}
.container {
width: 200px;
height: 29.7cm;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container>div.blue-rect {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
width: 200px;
max-width: 200px;
height: 100%;
background-color: #003d73;
}
.container>div.blue-rect>div.over-rect {
position: relative;
top: 20px;
width: 100%;
max-width: 200px;
height: 3%;
background-color: red;
}
.container>div.blue-rect>span.name {
position: relative;
top: -18px;
z-index: 20;
font-weight: bold;
color: white;
font-size: 35px;
}
.container>div.blue-rect>div.icon {
margin-top: 10px;
}
.education {
width: 60px;
height: auto;
}
page[size="A4"] {
position: relative;
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
#media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
<page size="A4">
<div class="container">
<div class="blue-rect">
<div class="over-rect"></div>
<span class="name">Name</span>
<div class="icon">
<img class="education" src="img/education.png">
</div>
</div>
</div>
</page>