Simplest 3 Columns Layout with CSS

Published on: April 8, 2008

This is an archived post from the ExtJS era — the code may be obsolete, but the principles often still apply.

After experimenting with Designing a 3 columns web page using TableLayout I have came with the solution that is, IMO, simplest possible:

north

navlinks

west

center

east

south

Works perfectly cross-browser in both standards compliant mode and quirks mode.

#column#css#html#know-how#layout
Saki

Saki

I’m a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.

9 comments

  1. ZeusTheTrueGodApril 8, 2008archive
    Thank you for this site and,of course,your blog, cause here i can found a lot of 'best practics' with ExtJs. Ususally it tooks more than hour to find that in ExtJS forum due for a lot of newbyes questions. Could you also post links to working example?
  2. jsakalosApril 8, 2008archive
    Sure, here is link: <a href="https://learnfromsaki.com/examples/3collayout.html" target="_blank" rel="nofollow">Simplest 3 Columns Layout with CSS Example</a>
  3. Jan RosaApril 10, 2008archive
    Dobrý den, zdravím z Prahy. Už delší dobu Vás registruji na ExtJs forum a musím říct, že s trochou závisti :-). Obdivuji, že se Vám podařilo takto uspořádat knowhow. Tak jako Vám mi ExtJS učaroval. Myslím, že má velkou budoucnost. Jen kdyby toho času bylo víc ... Chystám se psát blog o Ext v češtině a chci se zeptat, zda mohu od Vás občas převzít nějaký ten post? Jan Rosa
  4. jsakalosApril 10, 2008archive
    @Jan Rosa, thank you very much for your complimentary comment. I'd like to ask you to translate it to English as majority of readers of this blog do not speak Czech language. Your plan to write a blog in Czech language is perfect for people here in Czech and Slovak republics that do not speak English that well. Sure you can take texts from my blog or pages and translate them as long as you attribute the authorship of them to me and you provide links to the original texts. Good luck!
  5. arse_nixMay 13, 2008archive
    I'm learning ExtJS and your Examples.ExtJS are very helpful ... thanx you very much for your dedication on ExtJS.
  6. DMageJune 2, 2008archive
    Saki, the example page link is dead. :(
  7. SakiJune 3, 2008archive
    @DMage, must had been a temporary outage on ISP end. Server is up and running. Or a temporary overload... Anyway, there were no changes and you should be able to connect now.
  8. saidyjadeFebruary 27, 2009archive
    You example for this page comes up with not found.? has it been taken off?
  9. SakiFebruary 28, 2009archive
    Yes, it was superseded by <a href="http://examples.learnfromsaki.com/?ex=layout3c" target="_blank" rel="nofollow">Simplest 3-Column Layout</a>. I'll update blog too.

Comments are closed on archived posts.