Simple Page setup

by Victor

HTML

<div id="header">
    header
</div>
<div class="wrapper">
<div id="nav">
    <ul>
        <li><a href="#">link to a page</a></li>
                <li><a href="#">link to a page</a></li>
                <li><a href="#">link to a page</a></li>
                <li><a href="#">link to a page</a></li>
    </ul>
</div>

<div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure tempore maiores in obcaecati commodi rerum molestiae rem neque adipisci nihil provident sint laboriosam a magnam asperiores recusandae temporibus numquam facilis.
</div>    
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

#header {
    width:100%;
    background:blue;
    padding:30px 15px;
    margin-bottom:10px;

}
#nav {
    float:left;
    padding:10px;
    width:160px;
    margin:0;
    padding:0;
    text-align: center;

 
}
#nav ul li a {
    display:inline-block;
    text-decoration: none;
    padding:4px 10px;
    margin:2px;
    border-radius:5px;
}
#content {
    padding:10px;
    border:1px solid #e3e3e3;  
    
    float:left;
        margin:0;
    padding:0;
    width:50%;
        /* min-width:800px; */
}

@media screen and (max-width:767px) {
    #nav {
        float:none
    }
    #content {
    width:100%;
        min-width:100%;
    }

}
.wrapper {
    min-width:800px;
    display:block;
}

JavaScript

if($(window).width() > 767){
         alert('resizing greather than 767');
    var winWidth = $('.wrapper').width();
    var contentWidth = winWidth - 168;
    
    $('#content').width(contentWidth);
    // make sure the header extends 
     $('#header').width(winWidth);         
     }
 $(window).resize(function(){
     if($(window).width() > 767){
         alert('resizing greather than 767');
    var winWidth = $('.wrapper').width();
    var contentWidth = winWidth - 168;
    
    $('#content').width(contentWidth);
    // make sure the header extends 
     $('#header').width(winWidth);         
     }

});