Floating DIV fit over another DIV - html

Question

I need to get it so the div containing the date is at the top of the full_card div and expands to the full width of the card. Currently it is much lower and not expanding the full width.
p {
font-weight: bold;
font-family: Arial;
}
#container {
width: full;
}
.full_card {
float: left;
background-color: #d1ccff;
border-radius: 25px;
border: 5px solid #404266;
margin: 10px;
padding: 10px 30px 10px 30px;
width: 150px;
height: 250px;
}
#event {
font-size: 18px;
font-style: italic;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#tag {
font-size: 18px;
text-align: center;
color: #000;
}
.date_back {
background-color: #404266;
border-radius: 25px 25px 0px 0px;
min-width: 150px;
height: 40px;
}
#date {
font-size: 26px;
text-align: center;
color: #fff;
}
<div id="container">
<div class="full_card">
<div class="date_back">
<p id="date">1981</p>
</div>
<p id="event">Voldemort murders Lily and James Potter</p>
<hr>
<p id="tag">Harry Potter</p>
</div>
</div>

Answer 1

Modified your code to show you how this is done.
The padding on the .full_card element affected everything inside of it, including the purple date "tab". I commented out this padding so the tab wouldn't be pushed down and inward.
By default, <p> elements have margin on the top and bottom. You need to override this if you don't want it - I added margin: 0; to stop the #date element from moving down.
Since we removed padding in step 1 (30px from both sides), I added 60px of width to the .full_card element to bring it to 210px wide, and then added 30px of padding to the sides inside the #event element.
To get the border-radius working properly on the purple element, I added overflow: hidden to .full_card (to "trim" anything inside to its shape), and removed the unneeded border-radius that was on the .date_back element.
Hope this helps!
p {
font-weight: bold;
font-family: Arial;
}
#container {
width: full;
}
.full_card {
float: left;
background-color: #d1ccff;
border-radius: 25px;
border: 5px solid #404266;
margin: 10px;
/*padding: 10px 30px; */
width: 210px; /* added 60px */
height: 250px;
overflow: hidden; /* added this for radius */
}
#event {
font-size: 18px;
font-style: italic;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding: 0 30px; /* added this */
}
#tag {
font-size: 18px;
text-align: center;
color: #000;
}
.date_back {
background-color: #404266;
/* border-radius: 25px 25px 0px 0px; */
min-width: 150px;
height: 40px;
}
#date {
font-size: 26px;
text-align: center;
color: #fff;
margin: 0; /* added this */
}
<div id="container">
<div class="full_card">
<div class="date_back">
<p id="date">1981</p>
</div>
<p id="event">Voldemort murders Lily and James Potter</p>
<hr>
<p id="tag">Harry Potter</p>
</div>
</div>