vertically align an element to the bottom of another element without absolute positioning - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

vertically align an element to the bottom of another element without absolute positioning

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">
ul {<!--  w  w  w  .j  a va 2  s .  co m-->
   text-align:right;
   padding:0px;
   margin:0px;
}

ul li {
   padding-top:6px;
}

ul li a {
   background:yellow;
   display:inline-block;
   padding:11px 36px;
   font-size:21px;
}

img {
   width:231px;
   height:auto;
}

.wrap {
   display:inline;
}

ul, img {
   display:inline-block;
   vertical-align:bottom;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li> <a href="#">Lore</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem i</a> </li> 
   <li> <a href="#">Lorem ips</a> </li> 
   <li> <a href="#">Lorem i</a> </li> 
  </ul> 
  <img src="https://www.java2s.com/style/demo/Firefox.png">  
 </body>
</html>

Related Tutorials