CSS column element inside with text in the middle of border - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

CSS column element inside with text in the middle of border

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

#master {<!-- w  w w.jav  a 2 s.com-->
   column-count: 2;
}
#rule {
   position: absolute;
   width: 100%;
   height: 1px;
   background: #9C27B0;
   top: 7px;
   left: 0;
}
.Books {
   width: 100%;
   font-family: tahoma;
   font-size: 12px;
   border: 1px solid #ddd;
   line-height: 150%;
   background: #FFFFF6;
   float: right;
   box-sizing: border-box;
   padding: 5px 5px 10px 5px;
   margin: 3px;
   margin-top: 10px;
   position: relative;
   display: table;
   column-break-inside: avoid;
   -webkit-column-break-inside: avoid;
   min-height: 200px;
}
.bookmarkAds {
   position: absolute;
   left: 4px;
   color: #9e9e9e;
   cursor: pointer;
   text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
   top: -10px;
   font-size: 22px;
   background: red;
}


      </style> 
 </head> 
 <body> 
  <div id="rule"></div> 
  <div id="master"> 
   <div class="Books"> 
    <div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">
      x 
    </div> Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus 
   </div> 
   <div class="Books"> 
    <div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">
      x 
    </div> Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials