GRID

by Leo Lanese

HTML

<!DOCTYPE html>
<html class="no-js">
<head>
 <title></title>
</head>
<body lang="en">
    
    <div id="wrapper">
        <h1>960px fixed grid</h1>
        
        <nav>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.
        </nav>
        
        <section>  
Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.        
        </section>  

        <footer></footer> 
   </div>

 <div style='display:inline-block; width:100%'>
   <div class="arrow-left"></div><div class="line"><p id="size"></p></div><div class="arrow-right"></div>
 </div>

</body>
</html>

CSS

#wrapper {
    margin: 0 auto;
    width: 960px; /* cambiemos a 90% para hacerlo fluido. < 960 usaremos media-queries */
    border: 1px solid blue;
}

/* TARGETĂ·CONTEXT=RESULT */ 
nav {
    background-color:green;
    width: 97.9%; /* 940 / 960 = 0.979 * 100 = 97.9 */
}
section {
    background-color:darkred;
    width: 27.5%; /* 360 / 960 = 0.375em, * 100 = 37.5 */
    height:40%;
  
}
  

h1  {
    font-size: 3em; 
    font-style: bold;
    color: #000;
    font: Comic, Arial;
    text-transform: uppercase;
    text-align:center;
}


img {
  max-width: 100%;
  width: auto\9; /* ie8 */
  height: auto;
}
embed, object, video {
   max-width: 100%;
   height: auto;
}


/* arrows */
.arrow-left {
    float:left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 25px solid darkred;
    top: -.3em;
    position: relative;
}
.line {
    background-color: darkRed;
    background-position: bottom;
    width: 97%;
    height: 10px;
    top: 1em;
    position: relative;
    margin: 0 auto;
}

p {
    font-size: 1.5em;
    text-align: center;
    top: .8em;
    position: relative;
    color: #808080;
}

.arrow-right {
    float:right;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid darkred;
    top: -.8em;
    position: relative;
}

JavaScript

var sizer = function(){
       var w=0, h=0;
       if (document.body && document.body.offsetWidth) {
          w = document.body.offsetWidth;
          h = document.body.offsetHeight;
       }
       if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
          w = document.documentElement.offsetWidth;
          h = document.documentElement.offsetHeight;
       }
       if (window.innerWidth && window.innerHeight) {
          w = window.innerWidth;
          h = window.innerHeight;
       }

       if (w >= h) {
            size = 'w:<u>'+w+'px</u> >= h:'+h+'px';
       } else {
            size = 'w:'+w+'px < h:<u>'+h+'px</u>';
       }

       $("#size").html(size);
}

window.onresize = sizer;