<!DOCTYPE html>
<!-- this is HTML5 -->
<html>
<head>
<style>
body{
font-size:50px;
text-align:center;
margin:0px;
}
.div1{
min-width:10em;
max-width:15em;
background-color:#F00;
margin-left:auto;
margin-right:auto;
text-align:left;
padding-left:2em;
}
.div2{
position:absolute;
top:0px;
right:0px;
width:25%;
background-color:#000;
color:#FFF;
font-size:.5em;
min-height:200px;
}
@media (min-width: 401px) and (max-width: 800px) {
.div1 {
background-color:#999;
font-size:25px;
width:250px;
padding-left:10px;
}
.div2 {
position:static;
width:250px;
padding-left:10px;
background-color:#000;
color:#FFF;
font-size:.5em;
min-height:200px;
margin-left:auto;
margin-right:auto;
}
}
@media (max-width: 400px) {
.div1 {
background-color:#000;
font-size:25px;
width:100%;
color:white;
}
.div2 {
position:static;
width:250px;
padding-left:10px;
background-color:#000;
color:#FFF;
font-size:.5em;
min-height:200px;
margin-left:auto;
margin-right:auto;
}
}
</style>
</head>
<body>
<div class="div1">
class="div1"
</div>
<div class="div2">
class="div2"
</div>
</body>
</html>