Using box-sizing: border-box - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Using box-sizing: border-box

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

* {<!--   w w w  .  j  av a 2  s .  c  o m-->
   padding: 0;
   margin: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
}

.wrapper {
   width: 980px;
   margin: 0 auto 20px;
   padding: 10px;
   border: 0px solid #fff;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.featured_blog {
   width: 760px;
   height: 240px;
   padding: 10px;
   margin: 0 20px 20px 0;
   border: 1px solid #000;
   display: block;
   float: left;
   vertical-align: top;
   overflow: hidden;
   text-overflow: ellipsis;
}

.featured_author {
   width: 180px;
   height: 240px;
   border: 0px solid #000;
 
   display: block;
   float: left;
   vertical-align: top;
}
      </style> 
 </head> 
 <body> 
  <section class="wrapper"> 
   <div class="featured_blog"> 
    <h2> <span>Some Kind of Blog Title</span> </h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo orci, dictum id venenatis at, mattis nec enim. Maecenas vel molestie dolor. Maecenas mauris massa, congue at rhoncus et, dapibus sit amet eros. Nunc ipsum felis, eleifend in laoreet sit amet, tincidunt feugiat velit. Cras eu felis tortor, sed accumsan nisl. Ut volutpat viverra justo, quis consectetur felis tempor a. Etiam magna eros, euismod vel viverra in, facilisis sed libero. Vivamus in neque quis turpis adipiscing scelerisque dapibus at diam. Sed magna magna, ultrices quis posuere vel, pulvinar sodales dolor. Proin sapien sapien, adipiscing quis ultrices eget, cursus vitae enim. Maecenas ornare, erat non porta porta, sem felis condimentum erat, a lacinia nunc nisl a est.</p> 
   </div> 
   <div class="featured_author">
     Hui 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials