Div layout positioning - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

Div layout positioning

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetu</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
div {<!--from ww w.ja v  a2  s.  com-->
   border:2px solid Chartreuse;
}

.main {
   border:0;
   display:flex;
   flex-direction:row;
   height:100vh;
}

.top-left-column {
   height:calc(100vh - 121px);
   width:121px;
}

.bottom-left-column {
   height:121px;
   width:121px;
}

.center {
   display:flex;
   align-content:stretch;
   flex-direction:column;
   flex:2 2 0;
}

.center-top-column {
   height:81px;
}

.center-bottom-column {
   height:calc(100vh - 81px);
}

.right-column {
   height:100vh;
   width:121px;
}

.link {
   background:yellow;
   color:blue;
   font-family:arial;
   padding:11px 21px;
   position:absolute;
   right:11px;
   text-decoration:none;
   -webkit-transition:background .4s ease, color .4s ease;
   -moz-transition:background .4s ease, color .4s ease;
   -ms-transition:background .4s ease, color .4s ease;
   -o-transition:background .4s ease, color .4s ease;
   transition:background .4s ease, color .4s ease;
}

.link:hover {
   background:pink;
   color:OrangeRed;
}

.home-link {
   bottom:11px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="main"> 
   <div class="left"> 
    <div class="top-left-column">
      Lorem ipsu 
    </div> 
    <div class="bottom-left-column">
      Lorem ipsum d 
    </div> 
   </div> 
   <div class="center"> 
    <div class="center-top-column">
      Lorem ipsum 
    </div> 
    <div class="center-bottom-column">
      Lorem ipsum dol 
    </div> 
   </div> 
   <div class="right"> 
    <div class="right-column">
      Lorem ipsum do 
    </div> 
   </div> 
  </div> 
  <a href="https://blog.tom-maton.co.uk" class="link home-link" target="_blank">Lorem ips</a>  
 </body>
</html>

Related Tutorials