• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Float, Inline-block, Flexbox, Table and Grid - which one?

Community Expert ,
Jan 28, 2017 Jan 28, 2017

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Views

3.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 28, 2017 Jan 28, 2017

Copy link to clipboard

Copied

I think you answered most of your questions 🙂

We use display: table in some products, primarily to support equal height columns. Your use of it is perfectly reasonable. One thing that might be helpful is to set the table parent to "table-layout: fixed", which allows all modern browsers to scale images using max-width... among other things.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Your example is very simple, so it hardly puts any method to the test. If you make it a requirement to horizontally align the elements, then most of those methods will drop out and flexbox will prevail.

Another criteria to play with would be responsiveness. Here again flexbox has capabilities other methods don't have.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Rob Hecker2 wrote:

Another criteria to play with would be responsiveness. Here again flexbox has capabilities other methods don't have.

For anyone knowledgeable to even know there are so many methods... making any one of the responsive is extremely easy... especially considering that you would need to write extra CSS and likely at least one media query even for a flexbox design.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

What's the trick in making display: table; go from 3 col to 2 at 768px to 1 col at 480px? Below it just gets shunted into 1 col at 480px.

<style>

.boxes {

  display:table;

  width: 100%;

  height: 100%;

}

.box {

  display: table-cell;

  text-align: center;

  vertical-align:middle;

  line-height: 13em;

}

.box1 {

  background: orange;

}

.box2 {

  background: green;

}

.box3 {

  background: red;

}

@media (max-width: 420px) {

.box {

display: block;

width: 100%;

}

}

</style>

<div class="boxes">

<div class="box box1">Box 1</div>

<div class="box box2">Box 2</div>

<div class="box box3">Box 3</div>

</div>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Humm I guess you could float it left but is there a way without using float, just some kind of table property or inline block?

@media (max-width: 768px) {

.box {

float: left;

width: 50%;

}

}

Humm cant do that because if no height is set you lose the equal height cells and the layout gets messed up.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

ALsp wrote:

Rob Hecker2 wrote:

Another criteria to play with would be responsiveness. Here again flexbox has capabilities other methods don't have.

For anyone knowledgeable to even know there are so many methods... making any one of the responsive is extremely easy... especially considering that you would need to write extra CSS and likely at least one media query even for a flexbox design.

That would depend on the way the htnl and the css for the flexbox was coded. Done correctly no media-queries are required for the flexbox layout itself.

No matter which method is used, flexbox, or to some extent grids, both are more responsive layout friendly by default than any of the other methods mentioned.

As for floats with divs, anyone still using them for layout, is now doing the equivelent of using html tables for layout.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

pziecina wrote:

As for floats with divs, anyone still using them for layout, is now doing the equivelent of using html tables for layout.

Agreed, keep up people or die

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

No matter which method is used, flexbox, or to some extent grids, both are more responsive layout friendly by default

Right. Flexbox handles responsiveness more elegantly than the other methods (I can't speak to grids). There is more of a learning curve to using flexbox, as we all know, but none of this is rocket science.

Certainly Al knows that a lot of cool responsive flexiness is available with flexbox, without the need for media queries.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Absolutely, Rob. But in some cases, especially where pixel precision is needed or wanted, display table or inline-block have their advantages. The more tools in the toolbox the better 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Good point, Al. Since I am always working with a CMS where I have no idea what the content might be, pixel precision is not in my vocabulary.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

I'm not certain if pixel precision is even relevent anymore.

Viewing devices now range from 2 inch hd smartphones to 65 inch 4k tv's, with everything possible  inbetween, and with pixel densities of 8k on the horizon, pixel precission becomes impossible. This means that trying to position anything by pixel count having no real meaning as to where it will actually appear in the layout.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

I'm not certain if pixel precision is even relevant anymore.

I have migrated to using relative measurements but for some other applications unknown to me pixels may still be relevant. We'd have to ask Al about those.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

May seem strange, but i find the question of pixel pecission more interesting than which layout method to use.

Something i haven't thought about when it comes to rwd.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

Paula said:

As for floats with divs, anyone still using them for layout, is now doing the equivelent of using html tables for layout.

According to the Specs, 'The table element represents data with more than one dimension, in the form of a table.'

There is no such semantic problem using floats.

Paula said:

Given all the discussions over the last few months, (or maybe that should be years) why are you asking this question?

As I said, I was having a lazy Sunday afternoon, getting psyched up for the great match between Roger Federer and Raphael Nadal. Normally I would not be able to afford the time to muck around, but this time I decided to have some private 'fiddle' time. I came with a very simple little layout, commonly used as 'display' boxes. I then decided to style the display box using different styling techniques and ask the forum for their input.

I now have that input and the general consensus is that Flexbox should be used because of

  • vertical alignment
  • responsiveness
  • workflow

I can accept that and would agree with that were it not for the alternatives, some of which have the same advantages and are easier to work with and understand.

Should we just write these alternatives off or should we, to quote Al Sparber, be glad to have more tools in our toolbox?

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 29, 2017 Jan 29, 2017

Copy link to clipboard

Copied

I have said it before, and Al has also said it before -

use whatever method feels right for what you are doing. Different layout types can be used together.

The only item that is not a layout method acording to the W3C is using floats for layout, that is 100% a hack, that we have been forced to use as no alternative was available to use, now there is.

Relisticaly, except for personal sites, css grid layouts will not be fully usable for 2-4 years.. That does not mean that one should not use it until then, just that one must check the layout also works if grids is not supported.

As for pixel perfect layouts, one may say that to a client, but don't expect me to belive it is possible in rwd.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

The only item that is not a layout method acording to the W3C is using floats for layout, that is 100% a hack, that we have been forced to use as no alternative was available to use, now there is.

The method is called the Visual Formatting Model. According to W3C (updated 16th April 2016), this model is described as

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).

Nowhere in the named document do I find the word 'hack', which makes me wonder if I am missing something that you have discovered elsewhere. I would love to see the source of your info.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

BenPleysier wrote:

The only item that is not a layout method acording to the W3C is using floats for layout, that is 100% a hack, that we have been forced to use as no alternative was available to use, now there is.

The method is called the Visual Formatting Model. According to W3C (updated 16th April 2016), this model is described as

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).

Nowhere in the named document do I find the word 'hack', which makes me wonder if I am missing something that you have discovered elsewhere. I would love to see the source of your info.

Float has always been a hack, it was never meant for layout. It was originally introduced to allow text to flow around images/content. However some bright developer saw this as a way to use it for layout just as some bright developer before them saw <table> as a way to to use for layout. I think its generally well known.

Eric's Archived Thoughts: Floats Don’t Suck If You Use Them Right

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

As I said before

I would love to see the source of your info.
Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

BenPleysier wrote:

As I said before

I would love to see the source of your info.

I just edited my original post

Eric's Archived Thoughts: Floats Don’t Suck If You Use Them Right

Eric and I have had a few run-ins over the years on other forums but that's when I was a jumped up twit, not listening to the words of someone wiser than myself, who was 10 years ahead of where I was.

I'm still a jumped up twit and I'll be wrong again on many ocassions but if you always think youre right then you will never learn. I thought Flexbox was dumb when initially touted some years back because I was scared of change but once I embraced it I was wrong again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Visual presentation and layout, are not the same thing according to the W3C.

The W3C describes 4 visual layout methods, which are -

CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:

  • block layout, designed for laying out documents
  • inline layout, designed for laying out text
  • table layout, designed for laying out 2D data in a tabular format
  • positioned layout, designed for very explicit positioning without much regard for other elements in the document

The above is taken from the flexbox specs Introduction section at -

https://www.w3.org/TR/css-flexbox-1/

Strangely though, (and I think it must be an oversight) I first looked at the grid specs for this info, and it was not included.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Ben, just a clarification.

Vertical Centering when you don't know the size of the elements is what flexbox makes easy, as explained here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Flexbox also solves the equal height column issue with no hacks.

In a single sentence: flexbox gives you great control over parent to child and child to child relationships.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Rob Hecker2 wrote:

Ben, just a clarification.

Vertical Centering when you don't know the size of the elements is what flexbox makes easy, as explained here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Flexbox also solves the equal height column issue with no hacks.

In a single sentence: flexbox gives you great control over parent to child and child to child relationships.

No need to clarify Rob, I use Flexbox at the moment and will be using it a lot more once Bootstrap 4 has been released. It promises to be a great improvement judging from the experiments that I have made.

It is the ridiculing of other methods without any substantive argument that bothers me. Emotional arguments plucked out of the air because it happens to suit the argument.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

BenPleysier wrote:

It is the ridiculing of other methods without any substantive argument that bothers me. Emotional arguments plucked out of the air because it happens to suit the argument.

Maybe I have unintentionally ridiculed other methods, but I think I have always maintained that everything can be used, as a layout method (except floats maybe) sorry if I have unintentionally given the wrong impression Ben.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2017 Jan 30, 2017

Copy link to clipboard

Copied

Time for apologies (gosh you guys have brought the emotion out in me), I need to apologise for seeming to be against Flexbox. I am not. I also know that, for the moment at least, it is the better tool to use for layouts albeit with a little bit of hacking. I have the greatest respect for those of you that have managed to make it work for full layouts, something that I have not been able to do, but I am working on it in my spare time.

Great discussion, love you all!

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines