How to configure div position based on another div bottom position? - html

Question

I try to put "datacontain" div below "blue-div", but when blue-div height ++, it covers the "datacontain" div,
how to make "datacontain" div position responsive to blue-div bottom part position ?
Result :
-> i want to make the phonenumber (datacontain div) below blue-div
//style
<style>
.responsive {
width: 100%;
height: auto;
}
.flex-container {
display: flex;
flex-direction: column;
}
.blue-div {
max-width: 70%;
min-width: 70%;
height: 70px;
display: table;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top:-12%;
/* /transform: translate(-50%, -50%); */
position: absolute;
background-color: #003777;
z-index: 130;
border-radius: 10px;
}
.white-cont {
width: 80%;
height: 215px;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: -25px;
/* /transform: translate(-50%, -50%); */
position: absolute;
background-color: white;
z-index: 100;
border-radius: 10px;
vertical-align: middle;
box-shadow: 1px 1px 6px 1px #888888;
}
.container-sk {
position: relative;
}
.input-group-addon {
color: gray;
background-color: #ffffff;
}
.datacontain {
margin-top: 50px;
}
.submitButton{
border-radius: 35px;
display: block;
width: 100%;
border: none;
background-color: #ef7c24;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
</style>
//html
<img src="<?php echo base_url() . 'assets/img/banner.jpg' ?>" alt="Nature" class="responsive">
<div class="container-sk flex-container" style="background-color:#28abe3; min-height:300px">
<div class="white-cont">
<div class="datacontain col-md-12">
<div class="">
<label>phonenumber</label>
</div>
<div class="">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<img style="height:20px;width:20px" src="<?php echo base_url() . 'assets/img/flag.png' ?>">
+62
</div>
<input class="form-control" id="phonenumber" name="phonenumber" type="text" />
</div>
</div>
<div class="col-md-12 mx-auto">
<button class="submitButton" type="button"> KLAIM VOUCHER </button>
</div>
</div>
</div>
<div class="blue-div" style="">
<label style="color:#fff;font-size:14px;display:table-cell;word-wrap: break-word;vertical-align: middle;" >this is voucher 12345 12345 12354 12345 12345 1234 1234 1234 1234 345 345345 345 345 3 </label>
</div>
</div>
</div>

Answer 1

You need to remove position: absolute; on both the blue div and the white container. If you want the blue div to appear first you also need to move it before the white container in your code.
.responsive {
width: 100%;
height: auto;
}
.flex-container {
display: flex;
flex-direction: column;
}
.blue-div {
max-width: 70%;
min-width: 70%;
height: 70px;
display: table;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top:-12%;
/* /transform: translate(-50%, -50%); */
background-color: #003777;
z-index: 130;
border-radius: 10px;
}
.white-cont {
width: 80%;
height: 215px;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: white;
z-index: 100;
border-radius: 10px;
vertical-align: middle;
box-shadow: 1px 1px 6px 1px #888888;
}
.container-sk {
position: relative;
}
.input-group-addon {
color: gray;
background-color: #ffffff;
}
.datacontain {
margin-top: 50px;
}
.submitButton{
border-radius: 35px;
display: block;
width: 100%;
border: none;
background-color: #ef7c24;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
<div class="container-sk flex-container" style="background-color:#28abe3; min-height:300px">
<div class="blue-div" style="">
<label style="color:#fff;font-size:14px;display:table-cell;word-wrap: break-word;vertical-align: middle;" >this is voucher 12345 12345 12354 12345 12345 1234 1234 1234 1234 345 345345 345 345 3 </label>
</div>
<div class="white-cont">
<div class="datacontain col-md-12">
<div class="">
<label>phonenumber</label>
</div>
<div class="">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
+62
</div>
<input class="form-control" id="phonenumber" name="phonenumber" type="text" />
</div>
</div>
<div class="col-md-12 mx-auto">
<button class="submitButton" type="button"> KLAIM VOUCHER </button>
</div>
</div>
</div>
</div>
</div>