Align divs side by side with CSS in the same line - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

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

Description

Align divs side by side with CSS in the same line

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">
div>div {
   display:inline-block;
   position:absolute;
   height:51px;
}

#first {<!--from   w ww  . j ava  2s .c  o  m-->
   background:red;
   left:0;
   width:51px;
}

#second {
   background:blue;
   left:51px;
   right:51px;
}

#third {
   background:green;
   right:0px;
   width:51px;
}
</style> 
 </head> 
 <body> 
  <div> 
   <div id="first">
     Image 
   </div> 
   <div id="second">
     Some Text 
   </div> 
   <div id="third">
     Image 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials