Css for results page with 3 columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

Css for results page with 3 columns

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

.item {<!--  w w w. j  a  v  a  2 s  .  co m-->
   background-color:red;
   width:100%;
   border:1px solid #e9e9e9;
   float:left;
}
.item:hover {
   background-color:#f2faff;
   border:1px solid #e7f6ff
}
img {
   padding:10px;
   float:left
}
.info {
   padding:10px 20px 10px 10px;
   height:100px;
}
.info .title {
   font-size:18px;
   font-weight:700;
   color:#000000;
}
.info .subtitle {
   font-size:16px;
   font-weight:200;
   color:#000000;
}
.info .description {
   font-size:14px;
   font-weight:200;
   color:#666;
   margin-top:8px;
}
.price {
   padding:10px 20px 10px 10px;
   border-left:1px solid #e9e9e9;
   height:100px;
   float:right
}


      </style> 
 </head> 
 <body> 
  <div class="item"> 
   <a href="#" itemprop="url"> <img src="https://www.java2s.com/style/demo/Firefox.png" width="130" height="100" itemprop="image" alt=""> 
    <div class="info"> 
     <div class="price">
       200 Dollars 
     </div> 
     <div class="title" itemprop="name">
       this is a beautiful title 
     </div> 
     <div class="subtitle" itemprop="description">
       This a beautiful sub title 
     </div> 
     <div class="description">
       test test test test test test test test test test test test test test test test test test test test test test test test 
     </div> 
    </div> </a> 
  </div>  
 </body>
</html>

Related Tutorials