Why is it still hard to express layouts in HTML? | Hacker News Reader

Why is it still hard to express layouts in HTML?

CSS still seems to be pretty painful at expressing layouts, such as the main object for the page centred vertically and overlapping other elements to the left / right of it. There are many articles about them, but they all seem to explain to you how to do this painful thing, rather than explaining how its done elegantly.

It makes me curious about whether we should even expect to wish such things for a nice web experience, i.e. if the standards committees even consider these as they discuss specs and direction. Should one even expect these things to become as easy as, say, working with lists or paragraphs?

View on HN

The problem is not with HTML, it's with representation of complex visual structures using text. I don't believe that it can get much better than this. Obviously some things can be made easier by making shortcuts and making things more predictable when you're writing HTML, but you are still constrained to a textual representation for something that is, by nature, visual. GUI editors would probably be the most natural way of designing web pages but they often produce ugly and inefficient HTML that can be a pain to deal with. IMO there is no better way, except for improving the output of GUI editors.

This is something that Flex excels at. Perhaps the only thing that I really miss.

For instance, in flex, to do a 3 column layout, I could do something like:

  <HBox>
     <VBox width="33%">
       [Content]
     </VBox>
     <VBox width="33%">
       [Content]
     </VBox>
     <VBox width="33%">
       [Content]
     </VBox>
  </HBox>

I guess I'm not really understanding this thread, because doesn't virtually any CSS grid system give you the same capability?

Grid systems give you the ability to express things in terms of, well, grids - the components of the grid would not overlap. I didn't see anything in Bootstrap or Foundation that would help me position overlapping elements effectively, e.g. a stack of playing cards with each card offset vertically from the previous one.

http://dev.w3.org/csswg/css-flexbox/

It's simple with flexbox. Chrome and Firefox support the new standard. IE10 supports an older version.

Just realised I gave confusing examples at the end - let me switch them with, working with simple vertical layout and layout appropriate for text.

Reply on news.ycombinator.com