Put floating divs in desired order on smaller devices?
consider we have 3 floating divs and them next to each other
could we place left and right divs next to each other and middle divs above them in a smaller device like below an image?
I tried below but no success. Any ideas? thank.
<html>
<head>
<style>
#content {
width: 20%;
float: left;
background:purple;
}
#middle {
width: 64.3%; /* Account for margins + border values */
float: left;
margin-right:2px;
margin-left:2px;
background:yellow;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
/* for 980px or less */
@media screen and (max-width: 980px) {
#content {
width: 20%;
float: left;
background:purple;
}
#middle {
float:none;
clear:both;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
}
</style>
</head>
</head>
<body>
<div id="content">1</div>
<div id="middle">2</div>
<div id="sidebar">3</div>
</body>
</html>
source to share
The best way to do this is to think about mobile first. Place div in correct order for small device and use css position, left and right to get correct order on large device.
http://codepen.io/mouhammed/pen/Ieyom
HTML:
<html>
<head>
</head>
</head>
<body>
<div id="middle">2</div>
<div id="content">1</div>
<div id="sidebar">3</div>
</body>
</html>
CSS:
#content {
width: 20%;
float: left;
background:purple;
position:relative; /*pull this div to the right */
right:64.3%;
left:auto;
}
#middle {
width: 64.3%; /* Account for margins + border values */
float: left;
margin-right:2px;
margin-left:2px;
background:yellow;
position:relative; /*push this div to the left */
left:20%;
right:auto;
}
#sidebar {
width: 15%;
float: left;
background:red;
}
/* for 980px or less */
@media screen and (max-width: 980px) {
#content {
width: 70%;
background:purple;
right:auto;
}
#middle {
width:100%;
float:left;
left:auto;
}
#sidebar {
width: 30%;
float: left;
background:red;
}
}
source to share
The layout you are requesting cannot be achieved with CSS only when using floating divs. This is because the floating divs are ordered by source. There may be several different approaches for this though.
-
You can use jquery to control the position. But this is not desirable.
-
Use flexbox. Flex has decent browser support (IE 10+)
source to share
Here's one option to get you started: http://codepen.io/panchroma/pen/KjmBH
Html
<body>
<div class="wrap"> <!-- wrap everything in a positioned div so that we can use position: absolute with the children divs -->
<div id="middle">2</div>
<div id="content">1</div>
<div id="sidebar">3</div>
</div>
</body>
CSS
.wrap{
position:relative;
}
#content {
width: 20%;
background:purple;
position:absolute;
top:0;
left:0;
}
#middle {
width: 64.3%;
margin-left:20%;
background:yellow;
}
#sidebar {
width: 15.7%;
background:red;
position:absolute;
top:0;
right:0;
}
/* for 980px or less */
@media screen and (max-width: 980px) {
#content {
width: 60%;
float: left;
background:purple;
position:static;
}
#middle {
width:100%;
margin-left:0;
position:static;
}
#sidebar {
width: 40%;
background:red;
position:static;
float:right;
}
}
Good luck!
source to share