Whenever I resize the window,
I am looking to have A B C displayed one after the other in a vertical sequence,
I have been struggling with this for quite some time. Can someone please help me figure out how to achieve this? Thank you!
A
B
C
div#menu {
border: 1px solid red;
padding: 7px 7px 7px 7px;
}
div#navigation {
border: 1px solid black;
background: #A9F5A9;
height: 495px;
margin: 2px 2px 2px 2px;
float: left;
text-align: center;
line-height: 250px;
font-size: 100px;
width: 31%;
}
div#content {
height: 495px;
border: 1px solid black;
background: #F2F5A9;
margin: 2px 2px 2px 2px;
width: auto;
text-align: center;
line-height: 500px;
font-size: 100px;
margin-right: 33%;
}
#wrapper {
float: right;
width: 100%;
margin-right: -33%;
}
div#footer {
border: 1px solid black;
background: #81F7F3;
color: #000;
height: 50px;
margin: 1px 1px 1px 1px;
text-align: center;
line-height: 50px;
font-size: 50px;
clear: both;
width: auto;
}<div id="menu">
<div id="container">
<div id="wrapper">
<div id="content">A</div>
</div>
<div id="navigation">B</div>
<div id="footer">C</div>
</div>
</div>