making my DIv Responsive - html

Question

I Have One Div Which is Again Divided into 3 Div's. I Want to make these Div's responsive.
Snippet is given Below . Also I tried to Make Position Relative but this is not Working.
#upleft {
width: 34%;
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
width: 33%;
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
width: 33%;
background: green;
float: right;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}
<div class="test">
<div id="upleft">a1</div>
<div id="upright">a2</div>
<div id="below">a3</div>
</div>
please help

Answer 1

Use media queries:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
#upleft { width: 100%; }
#upright { width: 100%; }
#below { width: 100%; }
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
#upleft { width: 34%; }
#upright { width: 33%; }
#below { width: 33%; }
}
#upleft {
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
background: green;
float : left;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}

Answer 2

You could use a grid layout. You can define multiple widths for screen sizes : RWD
col-lg : large screen
col-md : middle screen
col-xs : small screen
#upleft {
width: 34%;
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
width: 33%;
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
width: 33%;
background: green;
float: right;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="test">
<div id="upleft" class="col-sm-3 col-md-6 col-lg-4">a1</div>
<div id="upright" class="col-sm-6 col-md-6 col-lg-8">a2</div>
<div id="below" class="col-sm-9 col-md-6 col-lg-8">a3</div>
</div>

Answer 3

Change position:relative; in CSS of .test to position:absolute;.
.test{
...
position: absolute;
...
}