use CSS to create two column page layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

use CSS to create two column page layout

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">

.half-column {<!-- w  w  w . ja  va2s  . co  m-->
   width: 49%;
   display: inline-block;
   vertical-align: top;
   margin-bottom:10px;
   margin-right:0.5%;
}
img.half-column {
   background-color: #ccc;
   height:100px;
}


      </style> 
 </head> 
 <body> 
  <div class="half-column">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div> 
  <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="half-column"> 
  <img src="https://www.java2s.com/style/demo/Firefox.png" class="half-column"> 
  <div class="half-column">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div> 
  <div class="half-column">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div> 
  <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="half-column"> 
  <img src="https://www.java2s.com/style/demo/Opera.png" class="half-column"> 
  <div class="half-column">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>  
 </body>
</html>

Related Tutorials