Align Divs at Top and leave space between Divs - 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 at Top and leave space between Divs

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">
#wrapper-threecol {<!-- w ww .j  a  v a  2 s .c o m-->
   position:relative;
   width:100%;
   border:none;
   margin:21px 0 0 0;
}

#threecol_row {
   height:100%;
   white-space:nowrap;
}

.threecol_cell1, .threecol_cell2, .threecol_cell3 {
   height:100%;
   width:31%;
   display:inline-block;
   white-space:normal;
   vertical-align:top;
   margin-left:6%;
}

.threecol_cell1 {
   margin-left:0;
}

.summary-headline {
   color:Chartreuse;
   font-size:21px;
   line-height:25px;
   margin:0;
   text-align:center;
}

.summary-description {
   color:yellow;
   font-size:14px;
   line-height:24px;
   margin:0;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper-threecol"> 
   <div id="threecol_row"> 
    <div class="threecol_cell1"> 
     <p class="summary-headline">Google Mail</p> 
     <p class="summary-description">test test test test test </p> 
    </div> 
    <div class="threecol_cell2"> 
     <p class="summary-headline">Google</p> 
     <p class="summary-description">test test test test test test test </p> 
    </div> 
    <div class="threecol_cell3"> 
     <p class="summary-headline">Google Maps</p> 
     <p class="summary-description">test </p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials