Fluid and fixed columns

Fluid-and-fixed-columns.markdown

Fluid and fixed columns

A Pen by Markus Schober on CodePen.

License.

index.html

<div id=fluid>
	<div id=inner-block> 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc haec primum fortasse audientis servire debemus. Ea possunt paria non esse. Id [redacted]tilius factum negabat. Duo Reges: constructio interrete.
	</div>
</div>
<div id=fixed-width>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Aperiendum est igitur, quid sit voluptas; Summum ením bonum exposuit vacuitatem doloris; Age sane, inquam. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Iam doloris medicamenta illa Epicurea tamquam de narthecio proment: Si gravis, brevis; Duo Reges: constructio interrete. Haec dicuntur inconstantissime.
</div>

style.css

#fluid {
	float: left;
	width: 100%;
	margin-right: -265px; /* The size of the fixed block. */
	}
#inner-block {
  background-color: #cccccc;
	margin-right: 265px; /* The size of the fixed block. */
  height: 500px;
	}
#fixed-width {
  background-color: #efefef;
	float: left;
  margin-left: 15px;
	width: 250px; /* The size of the fixed block. */
	}