

Why is it still hard to express layouts in HTML? - thebearmaster

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.<p>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?
======
doomrobo
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.

~~~
ablerman
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>

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

~~~
thebearmaster
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.

------
mcot2
<http://dev.w3.org/csswg/css-flexbox/>

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

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

