CSS overflow on sides from text on small 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

CSS overflow on sides from text on small 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">

html, body {
   margin: 0;
   padding: 0;
   border: 0;
}
.row {<!--from ww w  .  ja  va 2s  .c o  m-->
   overflow: hidden;
   margin-bottom: 1.95313%;
   *zoom: 1;
}
.row:before, .row:after {
   content:"";
   display: table;
}
.row:after {
   clear: both;
}
.row.fixed {
   margin: 0 auto;
   max-width: 1024px;
}
.row.inner-spacing {
   padding-left: 20px;
   padding-right: 20px;
}
.row:last-child, .row .row {
   margin-bottom: 0;
}
.row > .column {
   visibility: hidden;
   min-height: 75px;
   background: #ddd;
   position: relative;
   float: left;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   margin-left: 0.97656%;
   margin-right: 0.97656%;
   word-wrap: break-word;
}
.row > .column:first-child {
   margin-left: 0;
}
.row > .column:last-child {
   margin-right: 0;
}
.row > .column[data-size] {
   visibility: visible;
}
.row > .column[data-size="1"] {
   width: 6.54297%;
}
.row > .column[data-size="2"] {
   width: 15.03906%;
}
.row > .column[data-size="3"] {
   width: 23.53516%;
}
.row > .column[data-size="4"] {
   width: 32.03125%;
}
.row > .column[data-size="5"] {
   width: 40.52734%;
}
.row > .column[data-size="6"] {
   width: 49.02344%;
}
.row > .column[data-size="7"] {
   width: 57.51953%;
}
.row > .column[data-size="8"] {
   width: 66.01563%;
}
.row > .column[data-size="9"] {
   width: 74.51172%;
}
.row > .column[data-size="10"] {
   width: 83.00781%;
}
.row > .column[data-size="11"] {
   width: 91.50391%;
}
.row > .column[data-size="12"] {
   width: 100%;
}


      </style> 
 </head> 
 <body> 
  <div class="row"> 
   <div class="column" data-size="1"> 
    <h1>Header 1 Header 1 Header 1</h1> 
   </div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
   <div class="column" data-size="1"></div> 
  </div> 
  <div class="row"> 
   <div class="column" data-size="2"> 
    <h1>Header 1 Header 1 Header 1</h1> 
   </div> 
   <div class="column" data-size="2"></div> 
   <div class="column" data-size="2"></div> 
   <div class="column" data-size="2"></div> 
   <div class="column" data-size="2"></div> 
   <div class="column" data-size="2"></div> 
  </div> 
  <div class="row"> 
   <div class="column" data-size="3"> 
    <h1>Header 1 Header 1 Header 1</h1> 
   </div> 
   <div class="column" data-size="3"></div> 
   <div class="column" data-size="3"></div> 
   <div class="column" data-size="3"></div> 
  </div>  
 </body>
</html>

Related Tutorials