CODEWITHSUNDEEP
htmlcssresponsive-design
user3250818
user3250818

Reputation: 247

put floated divs in desired order in smaller devices?

consider we have 3 floated divs and their next to each other

could we put left and right div next to each other and middle div above them in smaller device, like below image?

enter image description here

I tried below but no success. any Idea? thanks.

<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>

Upvotes: 3

Views: 132

Answers (3)

mouhammed
mouhammed

Reputation: 954

The best way to do that is to think mobile first. Put the div in the right order for small device and use css position, left and right to get the right 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;
 }
}

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25485

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!

Upvotes: 1

ankitjain11
ankitjain11

Reputation: 253

The layout which you are asking for is cannot be achieved using only CSS when using floated divs. This is because floated divs are source ordered. Though there can be couple of different approaches for this.

  1. You can use jquery to manipulate the position. But that is not desirable.

  2. Use flexbox. Flex box has decent browser support (IE 10+)

Upvotes: 1

Related Questions