align two inner divs inside outer absolute positioned div with fixed width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

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

Description

align two inner divs inside outer absolute positioned div with fixed width

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">
#top {
   position:absolute;
   top:0;
   width:560px;
   height:134px;
   background-color:Chartreuse;
   overflow:hidden;
}

#div1, #div2 {
   width:51%;
   float:left;
}

#div1 {<!--from w w w.  ja va  2 s . co  m-->
   background-color:yellow;
}

#div2 {
   background-color:blue;
}
</style> 
 </head> 
 <body> 
  <div id="top"> 
   <div id="div1">
     Lorem 
   </div> 
   <div id="div2">
     Lorem 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials