Center one div and position two divs, one on each side - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Center one div and position two divs, one on each side

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">
#div1 {<!--from  ww w .j  a va 2s .c  o m-->
   width:100px;
   height:100px;
   background-color:Chartreuse;
   position:relative;
}

.insideDiv {
   position:absolute;
   top:51%;
   left:51%;
   padding:0;
   width:11px;
   height:11px;
}

#div2 {
   margin:-6px 0 0 -6px;
   background-color:yellow;
}

#div3 {
   margin:-6px 0 0 26px;
   background-color:blue;
}

#div4 {
   margin:-6px 0 0 -36px;
   background-color:pink;
}
</style> 
 </head> 
 <body> 
  <div id="div1"> 
   <div class="insideDiv" id="div2"></div> 
   <div class="insideDiv" id="div3"></div> 
   <div class="insideDiv" id="div4"></div> 
  </div>  
 </body>
</html>

Related Tutorials