Two Columns layout with text and image in each row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Two Columns layout with text and image in each row

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head></head> 
 <body translate="no"> 
  <div class="container" role="main"> 
   <article class="item"> 
    <div class="item__info"> 
     <h2>Header1</h2> 
     <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
    </div> 
    <div class="item__img"> 
     <img src="https://www.java2s.com/style/demo/Opera.png" height="275" width="450"> 
    </div> 
   </article> 
   <article class="item"> 
    <div class="item__info"> 
     <h2>Header2</h2> 
     <p>Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2.</p> 
    </div> 
    <div class="item__img"> 
     <img src="https://www.java2s.com/style/demo/Opera.png" height="275" width="450"> 
    </div> 
   </article> 
   <article class="item"> 
    <div class="item__info"> 
     <h2>Header3</h2> 
     <p>Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3</p> 
    </div> 
    <div class="item__img"> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png" height="275" width="450"> 
    </div> 
   </article> 
   <article class="item"> 
    <div class="item__info"> 
     <h2>Header4</h2> 
     <p>Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4.</p> 
    </div> 
    <div class="item__img"> 
     <img src="https://www.java2s.com/style/demo/Firefox.png" height="275" width="450"> 
    </div> 
   </article> 
  </div>  <!--  www.j a  va  2s  .c  o m-->
 </body>
</html>

Related Tutorials