tags: layout

Action executed in 0.000

Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

tags: CSS, layout, HTML, table
Illustration for the Web Typography: Designing Tables to be Read, Not Looked At article Tables come in many forms. Some contain simple numbers, others are complex with mixtures of numeric data and textual information. Some require reading row by row, others are scanned vertically. The potential use for tables is as varied as the written word. They can be financial statements, bus timetables, multilanguage dictionaries, tables of contents, numerical conversions, pricing options, feature comparisons, technical specifications, and so on.

url: https://alistapart.com/article/web-typography-tables

type: none, format: blog

Switching from inline-block to flex

Holy Grail Layout by Mozilla

While disliking CSS floats, i though i achieved the nirvana of page layout by using display: inline-block. Then i found display: flex.

Both the left side navigation and the right side main content were inline-blocks with the left side width: 20% and the right side width: 80%. I just had to make sure there was no margin on these elements and there was no white space between the elements. So often i had code like this <div><div class='left'>menu</div><div class='main'>content</div></div>; or for forms like this: <div class='form_style'><label>name</label><div><input/></div></div>.

Now i'm using display: flex. It's pretty well supported among all browsers. It easy to support responsive layouts. I'm looking forward to finding and switching to a flex based grid.

Reference: Using CSS flexible boxes


Solved by Flexbox — Cleaner, hack-free CSS

tags: flex, display, layout, CSS
Better, Simpler Grid Systems

CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

url: http://philipwalton.github.io/solved-by-flexbox/

type: article, format: none

Using inline-block for page layout

Helephant.com logo Thanks to a "gotcha" spotted by Helen at Helephant, i'm now able to replace the flaot: left i mean position: absolute style on my website with display: inline-block; width: 20% for the #sidebar. The #content gets 80%.

The problem i was facing was the #content at 80% width was falling below the #sidebar at 20% width.

What Helen spotted was that that these divs are now treated as inline and laid out in the flow of the page. So whitespace between the divs appears on the page. This space is enough to overflow the 100% width of the page.

BTW, one disadvantage to using position: absolute was the #sidebar and #content were taken out of the flow. Thus the #footer was not placed correctly on the page.


Quirks mode

Quirks mode refers to a technique used by some web browsers for the sake of maintaining backwards compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

url: http://en.wikipedia.org/wiki/Quirks_mode

type: article, format: wiki