Create 2 column layout in a series of divs as a list with leading icon - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Create 2 column layout in a series of divs as a list with leading icon

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">
.row {<!-- w w  w .  j a v  a2s.c o  m-->
   overflow:hidden;
   background:Chartreuse;
   margin:0 0 9px 0
}

.icon {
   float:left
}

.icon img {
   display:block
}

.message {
   margin:0 0 0 75px
}
</style> 
 </head> 
 <body> 
  <div class="row"> 
   <div class="icon"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   </div> 
   <div class="message">
     some long content here, some long content here, some long content here, some long content here, some long content here, some long content here 
   </div> 
  </div> 
  <div class="row"> 
   <div class="icon"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   </div> 
   <div class="message">
     some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here 
   </div> 
  </div> 
  <div class="row"> 
   <div class="icon"> 
    <img src="https://www.java2s.com/style/demo/Safari.png"> 
   </div> 
   <div class="message">
     some long content here 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials