Aligning Div Blocks in a container - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Aligning Div Blocks in a container

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.container {<!--   ww w.j  a v  a 2 s  .  com-->
   width: 300px;
   height: 75px;
   border: solid 1px #000;
}
.box-1, .box-2, .box-3, .box-4 {
   float: left;
   padding: 10px 5px;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="box-1"> 
            <img style="width:50px; height: 50px; " src="http://java2s.com/resources/f.png" alt="alt message"> 
         </div> 
         <div class="box-2"> 
            <img style="width:50px; height: 50px; " src="http://java2s.com/resources/e.png" alt="alt message"> 
         </div> 
         <div class="box-3"> 
            <img style="width:50px; height: 50px; " src="http://java2s.com/resources/j.png" alt="alt message"> 
         </div> 
         <div class="box-4"> 
            <img style="width:50px; height: 50px; " src="http://java2s.com/resources/j.png" alt="alt message"> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials