8 ms·

Using tables for layout is pretty understandable. But when tables went out of fashion it was all about using floats for layout for a few years. That was wild,

• city41 3y ago
  The era between tables and flexbox/grid was a difficult one. Floats were finicky and hard to get right. A lot of people just went back to tables, and I honestly didn't blame them.
  • kalleboo 3y ago
    Or the rare-in-the-wild but somewhat funky method of using the display: table/table-row/table-cell CSS declarations to create table-based designs, but applied to different tags so at least your HTML still only shows those fancy modern divs :)
  • chrisfinazzo 3y ago
    I had an internship during college at a small web shop that did a ton of HTML mail. Early on, after I had completed a project, they took a half day to try and teach me how floats worked. Note: If you think web browsers are weird, just wait until you try doing things in email clients or - $deity forbid - ebook readers. As you say, it was weird and initially quite difficult to wrap my head around it. Surprisingly, I didn't actually learn about the "clearfix" hack until a couple of years later when I interviewed for a Front-End job at - of all places - Fox News. The person who I talked with there gave me a take-home to work on and send back. Tl;dr I didn't get it quite right because I hadn't really taken the time to understand what the particular styles did to the layout. Fast-forward to today and I'm using floats w/ @print and a div class of "clearfix" set to "both" in order to reset the layout of a document that was converted from Word's .docx to HTML. How times change.
  • rchaud 3y ago
    The era between tables and flexbox/grid were the glory years of Bootstrap and Foundation CSS frameworks.
• jart 3y ago
  Floating divs killed the Dreamweaver. CSS came and broke your heart. Oh, a, a, a, oh.
  • xyzzy_plugh 3y ago
    We browse through Wayback and it seems so long ago... I met your children -- what did you tell them?
    • sgc 3y ago
      I told them to behave, but I don't know if they listened, because my old ears are plugged up, and I can only barely hear them. Hee dee hee, hee dee ho
• CM30 3y ago
  Speaking of floats being used for layout, you could probably add the clearfix hack to this list too. That was an essential part of my CSS toolbox for years, and something that ended up being one of the first things added in every new project. https://css-tricks.com/snippets/css/clear-fix/ https://css-tricks.com/snippets/css/clear-fix/
  • cantSpellSober 3y ago
    The linked article includes an example of the "commented backslash hack," a variation on point #3 in this article Fell out of use because "nobody uses IE for Mac" :)
    • dylan604 3y ago
      IE for Mac was so atrocious, there's a chapter dedicated to it in iWoz.
      • chrisfinazzo 3y ago
        As I understand it - I was a bit young when it happened, so all I have are secondhand accounts - IE 5 on Mac was substantially better that other browsers due in part to its CSS support.
        • dylan604 3y ago
          The chapter on IE for Mac in iWoz has nothing to do with how the browser render engine worked. It is about how the OS behaved after it was installed.
      • asadotzler 3y ago
        Tasman was way ahead of Trident actually. It had many problems Gecko had in that the web didn't care much for standards so implementing the standards, even well, wasn't considered a selling point. It was years of mostly Mozilla effort to make standards matter enough that web developers came around to them and then Tasman was viewed as an amazing pioneer alongside Gecko.
• cantSpellSober 3y ago
  > it was all about using floats for layout for a few years Called these "faux columns" and a basic 3-column layout was so difficult it was referred to as the "holy grail" of layouts https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_columns https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
  • dylan604 3y ago
    don't forget that the holy grail was to have a locked in header and footer with the middle section as scrollable 3 columns
    • xyzzy_plugh 3y ago
      This is firmly cemented in my mind as completely impossible. I won't listen to reason.
      • stabbles 3y ago
        It because of this exact technical challenge that ads nowadays appear between paragraphs in the middle content column, instead of in the right column where they belong.
        • dylan604 3y ago
          never underestimate the levels ad tech will stoop to interfere in an attempt to gain even more eyeballs/clicks. your attempt to sit them at the table in the back of the room next to the kitchen was never going to be the final placement
        • Dalewyn 3y ago
          I will go a step further and argue that all the websites we see today with dropdown menus at the top, a huge header image below it, one blob of disjointed content(?) below that, and finally the footer at the end is(was?) a direct result of the Holy Grail being so difficult to achieve outside of using tables.
• chrisfinazzo 3y ago
  If you're specifying @screen as the Media Type, the primary reason I can think of for going back to floats is art direction - especially if you wanted to float images alongside a block of text. I know there are "better" methods in more modern versions of the spec, but this is one that still seems to get a fair bit of use. Old CSS never dies, it just goes to live on a very special farm upstate where it only has to do 1 or 2 jobs.
• stabbles 3y ago
  As W3Schools still likes to call it: the new, modern clearfix hack [1] .clearfix::after { content: ""; clear: both; display: table; } [1] https://www.w3schools.com/howto/howto_css_clearfix.asp https://www.w3schools.com/howto/howto_css_clearfix.asp
  • reddalo 3y ago
    W3Schools is a horrible resource. I'd like Google to hide all of their results.
    • rchaud 3y ago
      A lot of people on HN seem to have this opinion. A lot of the content on that site has been re-written, and it's now a pretty fantastic resource for beginners. If you tell 2 beginners to build something with PHP/jQuery/JS, and send one person to W3Schools and the other to PHP.net/jquery.org/MDN, I have no doubt that the W3schools person will get something done in workable state faster.
      • mpixel 3y ago
        And if you tell 2 experts to build something with W3Schools as the resource against better documentation, I'm sure the results will be the opposite. That's not the point though, I'm not going to say different strokes for different folks. Instead I'd say, if that beginner uses the 'slower' path instead, that will pay dividends in time -- they are better of learning to use the docs than getting paid peanuts for delivering that project which depends on the juniors faster.
        • subtra3t 3y ago
          I disagree with you. "Learning" to use a particular documentation website (which, mindyou, changes its layout frequently) is not very time consuming. So a beginner should use w3schools while they see fit, and then move on to MDN, etc. when they find it to be unsuitable for their purposes.
• joshstrange 3y ago
  When floats first came out (or around that time) I wrote my computer repair site using them, all developed in FF. Then, as I was finishing, I opened it in IE and watched the entire design fall apart. Unfortunately the people I would be targeting with my website would almost certainly be using IE so I had to go back to the drawing board and rewrite it using tables. It was a sad day.
  • yread 3y ago
    Unfortunately, the opposite could also happen. You just needed to test every commit (or check in... ugh writing that word brought back painful memories) in different browsers
• _fat_santa 3y ago
  I had to develop some email templates a while back for the first time and was almost shocked that they still use the "tables method" for layouts. Overall I'd say developing email templates now is much like developing websites in the early 2000's, email clients have such a wider range of CSS support that there are hacks all around. We now have frameworks like MJML and Foundation that do their best to abstract all that stuff away through components but take a look under the hood at the rendered HTML and it's a very scary and nostalgic place.
  • dylan604 3y ago
    But if you wrote an email template app based on tables, why would you change it if it's not broken? Why would you go through the hassle and expense of redeveloping your app just to not use tables? No sane person looks at the HTML of an email. Only poor souls that get a request on how to send email spam in-house might ever consider it, or just the perversely curious. Either way, nobody cares what it looks like under the hood as long as it looks good when viewed in the client.
  • epiccoleman 3y ago
    I JUST had this same issue. Even worse, the Sendgrid "sample renderer" supports flex, but Gmail doesn't, so I didn't notice there was a problem until I started sending myself test emails, and then had to rewrite the whole template with tables. Madness!
  • zlg_codes 3y ago
    E-mail was never meant to support HTML, though, and it's a major vector for attacks. I wish more servers would disallow or strip HTML from their incoming messages. Generally speaking, if I see an HTML e-mail I know the other end cares NOTHING about security or efficiency, and is actively trying to snoop on me with analytics. Not surprising you had to fall back to very old HTML to hit a common featureset.
    • chrisfinazzo 3y ago
      As I’ve been converting from .docx to HTML, I was pleasantly surprised to find that using flexbox to lay out three elements in a single row is perfectly fine and - bonus points- the CSS doesn’t make want to gouge my eyes out. To your point that HTML can be a security risk, I remember interviewing at The College Board in mid 2011 and finding out that they still sent critical information - think testing admission tickets - with a MIME type of text/plain. If you need to guarantee delivery and readability, no matter where people are getting the message, I don’t see how you can do it any other way.
• hn_throwaway_99 3y ago
  I was going to comment that I took offense to calling table-based layout a hack in the first place. When tables went out of favor, and I saw many, many front end dev teams waste cumulative months of time creating a much less understandable web page fiddling with float nonsense all over the place, solely so "purists" could keep their religion in tact, I learned a valuable lesson. Joel Spolsky calls them "Architecture Astronauts" in a great blog post - the types of developers who forget that their job is to actually produce working software that does something well with the least amount of effort (architecture astronauts also gave us the ridiculousness of the first EJB spec, and stuff like the widely derided AbstractFactoryBuilderConstructor nonsense from Java). I feel like I've done a good job over time recognizing these architecture astronaut personalities and staying far away.
  • fsckboy 3y ago
    what do you mean by "purists" wrt tables? not nesting them or something? or using them only for marking up "relational" data and not page layout? or were these purists from the design side?
    • wayfinder 3y ago
      Tables semantically are meant to represent tabular data and using them for layout became “wrong.” From a practical point of view too, if you wanted to make separate mobile and desktop views just by using different stylesheets, using a table made it very difficult. (That said, in 2000, if you were using separate mobile and screen stylesheets, you were in an extreme minority because there were relatively few full HTML web browsers on mobile devices. Instead, most phones, if they could access the Internet, accessed a different version of the Internet accessed over WAP.)
  • jenscow 3y ago
    For sure. While tables went out of fashion, there was nothing usable to replace them. I was not really interested if those doing a "View Source" are going to be offended by my "incorrect" use of tables.
• hiccuphippo 3y ago
  I still remember article after article coming out with the newest "holy grail" of 3 column layout.
• jancsika 3y ago
  Something related to this: I made an SVG interface for displaying/editing diagrams using nw.js (essentially Electron). It would adapt the SVG viewport height and width based on the amount of space that's actively being used so that scrollbars will appear only when needed. The interface would work perfectly in Chromium and Firefox. But in nw.js I was using their menu api to display a window menu. That menu wasn't part of the DOM-- not sure how nw.js displays that menu but you can't introspect it in devTools. Anyhow, this was somehow creating an off-by-one problem where scrollbars would one pixel too early. The only way I stumbled upon to fix the issue was to set the SVG style to add "float: left;" Any ideas on what magic spell this casts? Technically the svg was the only DOM element in the page. I never did figure it out.
  • robertc 3y ago
    Possibly the svg element was inline, so sitting on the text baseline rather than the limits of the container element?
• scotty79 3y ago
  I'd say that using floats to make columns and rows in layouts was way worse hack.
• rabbits_2002 3y ago
  the time after table layouts and before flex and grid really sucked. table layouts sucked too but at least they made sense lol