Box-sizing with columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Box-sizing with columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>SO border-box1</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> 
  <style id="compiled-css" type="text/css">

.row-fluid{<!--  w w w.  ja va2  s .co m-->
   border-left:1px solid red;
   border-right:1px solid red;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="row-fluid"> 
    <div class="span6"> 
     <p>Lorem ipsum Ut sed eu aliquip voluptate sit sed exercitation. Lorem ipsum Ad dolore nisi magna nulla mollit elit exercitation occaecat dolor tempor qui dolor in laborum id voluptate exercitation laborum in elit labore minim et. Lorem ipsum Proident eiusmod consectetur in ut ea Duis ea eiusmod aute aliquip do. Lorem ipsum Veniam ex esse proident sed ex voluptate mollit labore.</p> 
    </div> 
    <div class="span6"> 
     <p>Ut sed eu aliquip voluptate sit sed exercitation. Lorem ipsum Ad dolore nisi magna nulla mollit elit exercitation occaecat dolor tempor qui dolor in laborum id voluptate exercitation laborum in elit labore minim et. Lorem ipsum Proident eiusmod consectetur in ut ea Duis ea eiusmod aute aliquip do. Lorem ipsum Veniam ex esse proident sed ex voluptate mollit labore.</p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials