Aligning div in responsive design
I am trying to align the div when the browser is reduced to 480px,
I have the below code in html,
<body>
<div id="container">
<div id="leftcol"> left left left left left left left left left left
left left left </div>
<div id="rightcol"> right right right right right right right right
right right right right </div>
<div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid
mid mid </div>
</div>
</body>
in css,
/* CSS Document */
*{
margin:0;
padding:0;
}
#container {
width: 100%;
height: 600px;
background-color:#FFFF00;
}
#leftcol {
float:left;
width:20%;
height: 600px;
background-color:#FF0000;
}
#rightcol {
float:right;
width:20%;
height: 600px;
background-color:#0099FF;
}
#midcol {
height: 600px;
background-color:#339900;
}
@media screen and (max-width:480px) {
#container {
width: 100%;
height: auto;
background-color:#FFFF00;
}
#leftcol {
width:100%;
height: auto;
background-color:#FF0000;
}
#rightcol {
width:100%;
height: auto;
background-color:#0099FF;
}
#midcol {
height: auto;
background-color:#339900;
}
}
![enter image description here][1]
http://jsfiddle.net/sztQR/
In the image, i have left right and middle. What i want is, middle left
and right
Is this possible?
No comments:
Post a Comment