Responsive to center a fluid div without px width while limiting the maximum width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Responsive to center a fluid div without px width while limiting the maximum width

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Lorem ip</title> 
  <style>
@media (max-width: 1000px)  {
   .center{}<!--from   w  ww. j a v a 2  s  . c  o m-->
      .center-inner {
      left:26%;
      top:26%;
      position:absolute;
      width:51%;
      height:301px;
      background:Chartreuse;
      text-align:center;
      max-width:501px;
      max-height:501px;
   }

}

@media (min-width: 1000px)  {
   .center {
      left:51%;
      top:26%;
      position:absolute;
   }
   
   .center-inner {
      width:501px;
      height:100%;
      margin-left:-251px;
      height:301px;
      background:yellow;
      text-align:center;
      max-width:501px;
      max-height:501px;
   }

}
</style> 
 </head> 
 <body> 
  <div class="center"> 
   <div class="center-inner">
     Lorem ipsum do 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials