Float, Inline-block, Flexbox, Table and Grid - which one?
A lazy Sunday afternoon, decide to experiment with different layout methods
The code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
background: #222;
color: white;
font-weight: 300;
font-family: sans-serif;
font-size: 85%;
line-height: 1.4;
margin: 0;
padding: 1rem;
}
body h2 {
font-weight: 500;
margin: 0 0 0.5rem 0;
}
body a {
color: white;
align-content:
}
body [class*='-block'] {
background: green;
padding: 1rem;
max-width: 20rem;
margin: 0 0 1rem 0;
}
.float-block {
overflow: hidden;
}
.float-block img {
width: 75px;
float: left;
}
.float-block> div {
width: calc(100% - 75px - 1rem);
float: right;
}
.inline-block {}
.inline-block> img {
/* defaults to inline-block */
width: 75px;
margin: 0 calc(1rem - 4px) 0 0;
/* remove strange white space */
}
.inline-block> div {
display: inline-block;
vertical-align: top;
width: calc(100% - 75px - 1rem);
}
.flex-block {
display: flex;
align-items: flex-start;
}
.flex-block> img {
width: 75px;
margin: 0 1rem 0 0;
}
.flex-block> div {
flex: 1;
}
.table-block {
display: table;
}
.table-block> img {
display: table-cell;
width: 75px;
margin: 0 1rem 0 0;
}
.table-block> div {
display: table-cell;
vertical-align: top;
}
.grid-block {
display: grid;
grid-template-columns: 75px auto;
grid-template-rows: auto;
grid-column-gap: 1rem;
}
.grid-block> img {
align-self: start;
}
.grid-block> div {
vertical-align: top;
}
</style>
</head>
<body>
<div class="float-block">
<img src="http://lorempixel.com/output/abstract-q-c-75-70-5.jpg" alt="">
<div>
<h2>Float</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
</div>
</div>
<div class="inline-block">
<img src="http://lorempixel.com/output/abstract-q-c-75-70-5.jpg" alt="">
<div>
<h2>Inline</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
</div>
</div>
<div class="flex-block">
<img src="http://lorempixel.com/output/abstract-q-c-75-70-5.jpg" alt="">
<div>
<h2>Flexbox</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
</div>
</div>
<div class="table-block">
<img src="http://lorempixel.com/output/abstract-q-c-75-70-5.jpg" alt="">
<div>
<h2>Table</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
</div>
</div>
<div class="grid-block">
<img src="http://lorempixel.com/output/abstract-q-c-75-70-5.jpg" alt="">
<div>
<h2>Grid</h2>
<p>This example needs a Grid-aware browser to render as intended, see <a href="https://developers.google.com/web/updates/2014/03/Get-on-the-CSS-Grid" target="_blank">Get on the CSS Grid!</a>
</p>
</div>
</div>
</body>
</html>
The result
After much discussion in various topics, I am wondering what the feeling of this forum is regarding the correct layout method.
For my input, I regard each method as being the correct one, I tend to use the one that is most convenient at the time. Having said that, I also think that Table the easiest one is to work with. Strange that Table has never been considered as a viable layout mechanism.
AdChoices