Layout Alternativen

by Andreas Scheidmeir

HTML

<body>
		<div class="wrapper">
			<h1>Float</h1>
			<div class="float">
				<div class="box-1">Lorem ipsum dolor sit amet, consetetur sadipscing. </div>
				<div class="box-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
				<div class="box-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
			</div>
			<h1>Inline</h1>
			<div class="inline">
				<div class="box-1">Lorem ipsum dolor sit amet, consetetur sadipscing. </div>
				<div class="box-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
				<div class="box-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
			</div>
			<h1>Display Table</h1>
			<div class="table">
				<div class="row">
					<div class="box-1">Lorem ipsum dolor sit amet, consetetur sadipscing. </div>
					<div class="box-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
					<div class="box-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
				</div>
			</div>
			<h1>Flex</h1>
			<div class="flex">
				<div class="box-1">Lorem ipsum dolor sit amet, consetetur sadipscing. </div>
				<div class="box-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
				<div class="box-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
			</div>
			<h1>Grid</h1>
			<div class="grid">
				<div class="box-1">Lorem ipsum dolor sit amet, consetetur sadipscing. </div>
				<div class="box-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
				<div class="box-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</div>
			</div>
            <p>Only IE10</p>
		</div>
    </body>

CSS

* {
  box-sizing: border-box;
}
.wrapper {
  margin: 0 auto;
  max-width: 500px;
}
.float,
.inline,
.table,
.flex,
.grid {
  margin-bottom: 20px;
}
.box-1,
.box-2,
.box-3 {
  color: snow;
  padding: 15px;
}
.box-1 {
  background-color: darkcyan;
}
.box-2 {
  background-color: firebrick;
}
.box-3 {
  background-color: darkgoldenrod;
}
.float .box-1,
.float .box-3 {
  float: left;
  width: 30%;
}
.float .box-2 {
  float: left;
  width: 40%;
}
.inline {
  clear: both;
}
.inline .box-1,
.inline .box-2,
.inline .box-3 {
  display: inline-block;
  vertical-align: top;
}
.inline .box-1,
.inline .box-3 {
  width: 30%;
}
.inline .box-2 {
  width: 38%;
}
.table {
  display: table;
}
.table .row {
  display: table-row;
}
.table .row .box-1,
.table .row .box-2,
.table .row .box-3 {
  display: table-cell;
}
.table .row .box-1,
.table .row .box-3 {
  width: 30%;
}
.table .row .box-2 {
  width: 38%;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex .box-1,
.flex .box-3 {
  width: 30%;
}
.flex .box-2 {
  width: 40%;
}
.grid {
  display: -ms-grid;
  -ms-grid-columns: 30% 40% 30%;
  -ms-grid-rows: auto;
}
.grid .box-1,
.grid .box-2,
.grid .box-3 {
  -ms-grid-row: 1;
}
.grid .box-1 {
  -ms-grid-column: 1;
}
.grid .box-2 {
  -ms-grid-column: 2;
}
.grid .box-3 {
  -ms-grid-column: 3;
}