/* CSS style.css layout.css * */ *{box-sizing:border-box;} /* width: 50px; width: 20% relational sizing: X%; to parent container

...

*/ header{ height: 100px; padding: 20px; text-align: center; background-color:salmon; } nav { background-color:yellow; margin:0px; } nav ul{ list-style-type:none; text-align:center; margin:0px; padding:10px; } nav ul li { display:inline; padding:5px 15px; } nav ul li a { color: blue; text-decoration:none; padding:10px; } nav ul li a:hover { background-color: red; } .row{margin:0px; height:400px;} .row:after{ /*clearfix hack */ display:table; content:""; clear:both; } .left { float:left; width:60%; height:100%; padding:5px 20px; background-color:gray; } .right { float:left; width:40%; height:100%; padding:5px 20px; background-color:tan; } footer { padding: 20px; background-color:#A34037; } a.clickableImg { margin-left:20%; text-align:center; } img.thumbnail { width:40%; height:auto; } img.thumbnail:hover { width:43%; }