I am having a simple webpage and I want to change the layout so that when the width is decreased, the "middle" div goes on top of the "left" div. Currently, the middle div is positioned below the left div, but I would like to make it overlap the left div.
Check out this link for reference.
This code snippet controls the layout:
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
display: inline-block;
margin-top:10px;
height:500px;
width:300px;
background:red;
}
#middle{
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:1570px;
background:gray;
}
@media (max-width:1320px){
#left{
width:800px;
height:200px;
margin:20px auto;display:block;
}
#middle{
width:800px;
}
#bottom{
margin-top:100px;
}
}
@media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}To implement this layout in your HTML file, add the following elements:
<title>First Responsiveness</title>
</head>
<body>
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>