<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liquid tables with content</title>
</head>
<body>
<style>
*:before, *:after {box-sizing: border-box;}
body {margin: 0;}
h1 {font-size: 1.5em; line-height: 2em; padding: 0; margin: 0; text-align: left;}
p {font-size: 1em; line-height: 1em; padding: 0; margin: 0; text-align: left;}
div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.bodyWrap {
padding: 0 10px;
background-color: #aaa;}
.pageWrap {
max-width: 1160px;
margin: 0 auto;
background-color: #bbb;}
.row {
display: table-row;
background-color: #66ccff;}
.column {
display: table-cell;
border-collapse: collapse;}
.aside {
width: 285px;
padding-left: 10px;}
.imageList {
width: 260px;
padding-right: 10px;}
.imageListWrapper {
max-width: 250px;
height: auto;
overflow: hidden}
</style>
<div class="bodyWrap"><!-- css: margin -->
<div class="pageWrap"><!-- css: max-width + center -->
<h1>Right fixed</h1>
<div class="row">
<div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div><!-- .column -->
<div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
</div><!-- .column -->
</div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
<div class="pageWrap"><!-- css: max-width + center -->
<h1>Left fixed</h1>
<div class="row">
<div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
<div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
</div><!-- .column -->
</div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
<div class="pageWrap"><!-- css: max-width + center -->
<h1>Full width</h1>
<div class="row">
<div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
</div><!-- .column -->
</div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
<div class="pageWrap"><!-- css: max-width + center -->
<h1>Right fixed combined with left fixed</h1>
<div class="row">
<div class="column">
<div class="row">
<div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
<div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
</div><!-- .column -->
</div><!-- .column -->
<div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
</div><!-- .column -->
</div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
</body>
</html>CSS resource: https://developer.mozilla.org/en-US/docs/Web/CSS
CSS animation examples: http://www.dynamicdrive.com/
CSS semantic:
http://css-tricks.com/semantic-class-names/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
Failed resources:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/