move up an inner box and keep outer box in place with CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

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

Description

move up an inner box and keep outer box in place with CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
#yellow {<!--   w  ww  .  ja v a2 s  .  com-->
   height:100px;
   background:yellow;
}

#blue {
   background:blue;
}

#red {
   background:red;
   width:401px;
   height:100px;
   margin:0px auto;
   position:relative;
   top:-31px;
}
</style> 
 </head> 
 <body> 
  <div id="yellow"></div> 
  <div id="blue"> 
   <div id="red">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials