MarcaLayout

by Koubenec

HTML

<script src="https://raw.github.com/bramstein/jsizes/master/lib/jquery.sizes.js"></script>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>    


<div id="leftmostcolumn"><div id="logo"><img id="logoimg" src="http://marcatectura.com/wp-content/uploads/2012/11/Logo_1000.png"></div></div><div id="leftcolumn"><div id="graphic"><img id="graphicimg" src="http://marcatectura.com/wp-content/uploads/2012/11/Graphic_1000.png"></div></div><div id="rightcolumn"><div id="web"><img id="webimg" src="http://marcatectura.com/wp-content/uploads/2012/11/Web_1000.png"></div></div><div id="rightmostcolumn"><div id="print"><img id="printimg" src="http://marcatectura.com/wp-content/uploads/2012/11/Print_1000.png"></div></div><div id="aboutme">about me</div>

CSS

body {
    width: 100%;
    height: 100%;
    background-color: red;
}

#leftmostcolumn {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background-color: #aa2d2d;
}

#leftcolumn {
    position: absolute;
    top: 0;
    left: 25%;
    width: 25%;
    height: 100%;
    background-color: #FFEFEA;
}

#rightcolumn {
    position: absolute;
    top: 0;
    left: 50%;
    width: 25%;
    height: 100%;
    background-color: yellow;
}

#rightmostcolumn {
    position: absolute;
    top: 0;
    left: 75%;
    width: 25%;
    height: 100%;
    background-color: gray;
}

#logo {
  width:100%;
  background-color: #aa2d2d; 
  color: white;    
}

#graphic {
  width:100%;
  background-color: #FFEFEA; 
  color: white;    
}

#web {
  width:100%;
  background-color: yellow; 
  color: white;    
}

#print {
  width:100%;
  background-color: gray; 
  color: white;    
}

#logoimg {
    max-width: 100%;
    min-width: 10%;
    height: auto;
    margin: 0;
    padding: 0;
}

#graphicimg {
    max-width: 100%;
    min-width: 10%;
    height: auto;
    margin: 0;
    padding: 0;
}

#webimg {
    max-width: 100%;
    min-width: 10%;
    height: auto;
    margin: 0;
    padding: 0;
}

#printimg {
    max-width: 100%;
    min-width: 10%;
    height: auto;
    margin: 0;
    padding: 0;
}

#aboutme {
  background-color: blue;
  width: 100%;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 800px) {

    #leftmostcolumn {
    /*float: left;*/
    width: 50%;
    height: auto;
    background-color: #aa2d2d;
    }

    #leftcolumn {
    position: relative;
    left: 50%;
    /*float: left;*/
    clear: right;
    width: 50%;
    height: auto;
    background-color: #FFEFEA;
    }

    #rightcolumn {
    position: relative;
    float: left;
    left: 0;
    /*clear: left;*/
    width: 50%;
    height: auto;
    background-color: yellow;
    }

    #rightmostcolumn {
    position: relative;
    left: 0;
    float: left;
   ...