CSS navigation on left side, picture on right - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav bar alignment

Description

CSS navigation on left side, picture on right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.formDiv1, .formDiv2 {<!--from w  w  w  . j av  a  2  s.c o  m-->
   vertical-align:top;
   padding-left:11px;
   display:inline-block;
   width:251px;
   height:100px;
   border:2px solid Chartreuse;
   padding:11px;
   text-align:center;
   -webkit-transition:all .6s ease;
   -moz-transition:all .6s ease;
   -ms-transition:all .6s ease;
   -o-transition:all .6s ease;
   transition:all .6s ease;
}

.formDiv1:hover, .formDiv2:hover {
   background-color:yellow;
}

@media (max-width: 650px)  {
   .formDiv2 {
      margin-top:151px;
      margin-left:-277px;
   }

}
</style> 
 </head> 
 <body> 
  <div class="formDiv1">
    Lorem i 
  </div> 
  <div class="formDiv2">
    Lorem i 
  </div>  
 </body>
</html>

Related Tutorials