36 Replies Latest reply on Jan 30, 2017 6:28 AM by pziecina

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

    BenPleysier Adobe Community Professional & MVP

      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.

        • 1. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
          ALsp Level 4

          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.

          1 person found this helpful
          • 2. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
            Rob Hecker2 Most Valuable Participant

            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.

            • 3. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
              pziecina Level 6

              As Rob says, it all depends on the layout, and mix and match of layout methods has been the norm for the last few years.

               

              One layout method you did not mention is multi-column, which i have found essential for layouts with lots of text, no matter which main layout method one decides to use.

               

              As a little bit of history though. The reason table layouts never recieved the attention they deserved, was because of a bug in Chrome and Android browsers, which was not fixed until the same version that introduced the the 'new' flexbox syntax. Effectively placing all the attention on flexbox.

               

              Of course all new layout methods that would not work in IE8, without a polyfill or falback css, many talked down as unworkable, or not untill 2021, to complexed and every other objection one can think of was put forward.

               

              All the objections and reasons for not using anything new, has left us with a situation of some coders using the new methods, and not enough overall experiance of their use(s) making its way into public forums such as this.

              1 person found this helpful
              • 4. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                pziecina Level 6

                As a thought on which layout to use, and i have said this often over a number of years.

                 

                Without support in whatever editor or ide, only professional coders will use ithe newer layou methods, this efectively means 90% of web or app creators have no idea how to use anything beyond floats.

                1 person found this helpful
                • 5. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                  osgood_ Level 8

                  BenPleysier wrote:

                  Strange that Table has never been considered as a viable layout mechanism.

                   

                  I think it has by any developer that has a reasonable insight into coding. I was using it to resolve certain layout issue before Flex came along and I know of many a good developer that still use it frequently, although I'm not sure why now to be honest, given Flex can do it much better, maybe they don't want to pack their css with vendor prefixes, that's the only real reason  I can think why I would want to use 'table' over 'flex', unless I needed to support a lesser browser, but that decsion has to be made by the individual.

                   

                  I'll go with flex as its here an now, suits my workflow and I like to try and remain current. I dont think theres any point in putting off what can be used today until tomorrow or next year, once something has major browser support and those browsers that dont support are insignificant regarding user numbers, move on.

                  1 person found this helpful
                  • 6. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                    pziecina Level 6

                    Remember your complaint about flexbox being only one direction, and the link to the article you used that said do not use?

                     

                    Well the author wrote another article 5 months later saying use -

                    https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

                    1 person found this helpful
                    • 7. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                      ALsp Level 4

                      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.

                      1 person found this helpful
                      • 8. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                        osgood_ Level 8

                        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>

                        1 person found this helpful
                        • 9. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                          osgood_ Level 8

                          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.

                          1 person found this helpful
                          • 10. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                            pziecina Level 6

                            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.

                            • 11. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                              osgood_ Level 8

                              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

                              • 12. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                Rob Hecker2 Most Valuable Participant

                                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.

                                1 person found this helpful
                                • 13. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                  pziecina Level 6

                                  BenPleysier

                                   

                                  just a though Bem.

                                   

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

                                   

                                  After all, we have covered all this previously.

                                  • 14. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                    ALsp Level 4

                                    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 :-)

                                    1 person found this helpful
                                    • 15. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                      Rob Hecker2 Most Valuable Participant

                                      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.

                                      • 16. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                        pziecina Level 6

                                        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.

                                        • 17. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                          Rob Hecker2 Most Valuable Participant

                                          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.

                                          • 18. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                            pziecina Level 6

                                             

                                            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.

                                            • 19. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                              BenPleysier Adobe Community Professional & MVP

                                              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?

                                              • 20. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                ALsp Level 4

                                                To me, pixel-precision is irrelevant. But there are many designers around that are not so progressive . But being that this is a Dreamweaver forum, run by Adobe, I find it the whole issue pretty funny.

                                                • 21. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                  pziecina Level 6

                                                  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.

                                                  • 22. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                    BenPleysier Adobe Community Professional & MVP
                                                    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.

                                                    • 23. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                      osgood_ Level 8

                                                      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

                                                      • 24. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                        Rob Hecker2 Most Valuable Participant

                                                        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.

                                                        1 person found this helpful
                                                        • 25. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                          BenPleysier Adobe Community Professional & MVP

                                                          As I said before

                                                          I would love to see the source of your info.
                                                          • 26. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                            BenPleysier Adobe Community Professional & MVP

                                                            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.

                                                            • 27. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                              osgood_ Level 8

                                                              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.

                                                              1 person found this helpful
                                                              • 28. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                pziecina Level 6

                                                                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.

                                                                1 person found this helpful
                                                                • 29. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                  pziecina Level 6

                                                                  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.

                                                                   

                                                                  • 30. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                    osgood_ Level 8

                                                                    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.

                                                                     

                                                                    Its not so much ridiculing them as being logical. You have to read lots and make a judgement based on that. Thats how I come to my judgements. If floats were ever meant to be used for layout then why so many hacks needed to make them work?

                                                                     

                                                                    Its also not that floats didnt do a good job, they did and still do, but now we have something better why no use it.

                                                                     

                                                                    Sure if you need to support IE9 and possible 10 then you have to be more selective but if those are browsers you don't need to concern yourself with then you may as well just use Flexbox particulary if you are using a pre-processor which will produce all the  css vendor prefixes for you. I prefer to just get it right in the browers that support display: flex; and then go back through the css after and add in the prefixes, that keeps the ugliness out of the file until the last minute.

                                                                     

                                                                    Also there are many way to use Flexbox. Its not critical that you use Flexbox at its purist. You can combine it with the way you have always worked. It brings more options to the party.

                                                                    1 person found this helpful
                                                                    • 31. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                      Rob Hecker2 Most Valuable Participant

                                                                      No need to clarify Rob, I use Flexbox at the moment

                                                                       

                                                                      Good. I had in fact gotten the impression from this discussion that you had not really waded into the flexy waters.

                                                                      • 32. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                        pziecina Level 6

                                                                        Floats are now included in the Updated 2.1 specs in regards to positioning, because of css exclusions -

                                                                        https://www.w3.org/TR/css3-exclusions/

                                                                         

                                                                        Exclusions where originally called 'positioned floats' in the original draft, and must be declared as floated elements for them to work. Currently it is only implemented in IE10+, but other browsers, (except FF) are working on an implementation.

                                                                        1 person found this helpful
                                                                        • 33. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                          BenPleysier Adobe Community Professional & MVP

                                                                          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!

                                                                          • 34. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                            pziecina Level 6

                                                                            No need to apologise Ben.

                                                                             

                                                                            The first time I tried flexbox I walked away from it for months, and maintained that it was useless. It was only when I used the first 'proper' implementation in IE10 that I began to see what was possible, then Opera had an implementation to the latest specs, (before it moved to the Blink engine) and I became hooked.

                                                                             

                                                                            I can see grids and srcset facing much the same ridicule, and especially srcset.

                                                                             

                                                                            The problem with all these new methods, is that people are writing about them when they are at the stage of learning that I was with flexbox, the first time I tried it, given everyone who is trying to learn these new methods the wrong impression.

                                                                            • 35. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                              osgood_ Level 8

                                                                              pziecina wrote:

                                                                               

                                                                              I can see grids and srcset facing much the same ridicule, and especially srcset.

                                                                               

                                                                               

                                                                               

                                                                              I've already jumped out of my pram concerning srcset BUT I suspect I'll reverse my opinions when I fully understand it and there is a clearer path as to what to use. At the moment how to deal with images for different devices is still a grey area.

                                                                              • 36. Re: Float, Inline-block, Flexbox, Table and Grid - which one?
                                                                                pziecina Level 6

                                                                                osgood_ wrote:

                                                                                 

                                                                                I've already jumped out of my pram concerning srcset BUT I suspect I'll reverse my opinions when I fully understand it and there is a clearer path as to what to use. At the moment how to deal with images for different devices is still a grey area.

                                                                                Don't under any circumstances read anything on-line at the moment, especially when it comes to using the sizes attribute. Most of what I have seen and read on-line, makes it look so difficult that one would never even consider using it.