Div floating after moving to responsive and back - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Div floating after moving to responsive and back

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit</title> 
  <style>
#footerSectionWrapper {<!--  w  w w  .jav  a 2s.  com-->
   width:100%;
   background-color:Chartreuse;
   vertical-align:top;
   padding:21px 0px;
}

#footerSection {
   background-color:yellow;
   width:100%;
   max-width:1201px;
   margin:0 auto;
   padding-top:11px;
}

#footerList {
   background-color:blue;
   list-style-type:none;
   display:block;
   margin:0px auto;
   text-align:center !important;
   -webkit-margin-before:0;
   -webkit-margin-after:0;
   -webkit-margin-start:0px;
   -webkit-margin-end:0px;
   -webkit-padding-start:0px;
}

#footerList li {
   background-color:pink;
   border:2px solid OrangeRed;
   display:inline-block;
   width:91%;
   height:auto;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   padding:11px 0px;
   border-bottom:2px solid grey;
   margin:auto;
}

#copyrightSection {
   background-color:BlueViolet;
   width:100%;
   display:block;
   padding:21px;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   text-align:center;
   float:left;
}

@media all and (min-width:641px) {
   #footerList {
      list-style-type:none;
      width:51%;
      display:inline-block;
      margin:0px;
   }
   
   #footerList li {
      display:inline-block;
      width:50%;
      float:left;
      height:151px;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      border-left:2px solid Chartreuse;
      padding:11px 11px 11px 21px;
      text-align:left;
   }
   
   #footerList li.details, li.contact {
      border-bottom:2px solid yellow;
      padding-top:51px !important;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
   }
   
   #footerList li.services, li.resources {
      padding-bottom:251px !important;
      border-bottom:none !important;
   }
   
   #copyrightSection {
      width:40%;
      display:inline-block;
      padding:21px;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      float:left;
      text-align:left;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="footerSectionWrapper"> 
   <!--green--> 
   <div id="footerSection"> 
    <!--red--> 
    <ul id="footerList"> 
     <!--blue--> 
     <li class="details"> <p>Lorem ipsum do</p> </li> 
     <li class="contact"> <p>Lorem ipsum dolor si</p> </li> 
     <li class="resources"> <p>Lorem ipsum d</p> </li> 
     <li class="services"> <p>Lorem ipsum d</p> </li> 
    </ul> 
    <div id="copyrightSection"> 
     <!--yellow--> 
     <p>Lorem ipsum dol</p> 
    </div> 
    <div class="clear"></div> 
   </div> 
   <!--/footerSection--> 
   <div class="clear"></div> 
  </div> 
  <!--/footerSectionWrapper-->  
 </body>
</html>

Related Tutorials