Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive 1-2-3 column flexbox layout?

  • This topic is empty.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #241666
    I.m.learning
    Participant

    @Paulie_D:
    I had to laugh

    Some of us had to be self-taught because the web didn’t exist at the time.

    Mom told me she still remembers punch cards. How many people would even know what that means?

    #241671
    Paulie_D
    Member

    Punchcards…yep.

    Punch tape and having to punch it by hand because they hadn’t gotten around to linking the punching machine to the terminal.

    #241678
    horstenj
    Participant

    Guys, don’t make me feel even older :-( ;-) I started my career with punch cards in the 70s….. My most recent experience web design experience has been with html 1.0 on the original ‘http deamon’ (now called a ‘webserver’) from Tim Berners Lee himself. So, in the last month I got a bit of catching up to do ;-)

    But back on topic: Thanks for the comment re display:content and grid. Grid sounds very promising and simple but not available yet. I can’t figure out yet how should apply display:content for my case (if it would be available)

    #241679
    Paulie_D
    Member

    display:contents is very new, only supported by FF and even that’s behind a experimental flag.

    Definitely not production ready.

    #241680
    Paulie_D
    Member

    How it works is you wrap elements as you normally would but by setting display:contents on that wrapper (as and when required) it’s as though the wrapper did not exist.

    So for your required “medium” layout we could wrap the two asides into a single div but have that wrapper not be effective for various viewport widths.

    You central section really needs to be this HTML (excluding the header and footer) given the current state of flexbox

    <main>
      <div class="asidewrap">
        <aside></aside>
        <aside></aside>
      </div>
      <div class="content"></div>
    </main>
    

    Now obviously this won’t work for the other layout so with those we can/could apply display:contents to the .asidewrap div and it would be as though the HTML would be

    <main>
        <aside></aside>
        <aside></aside>
      <div class="content"></div>
    </main>
    

    Then we just order the divs as we want.

    Alas…we’re not there yet.

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.