tags: layout, display

Action executed in 0.000

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.