After experimenting with Designing a 3 columns web page using TableLayout
I have came with the solution that is, IMO, simplest possible:
<!-- vim: ts=2:sw=2:nu:fdc=2:spell
An Application Page
@author Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date 2. April 2008
@version $Id$
@license application.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
License details: http://www.gnu.org/licenses/lgpl.html
-->
<!-- Layout Mandatory Styles -->
#ct-wrap {
text-align:center;
}
#ct {
text-align:left;
margin:auto;
}
#north, #navlinks, #south {
float:none;
clear:both;
}
#west {
float:left;
clear:left;
}
#center {
float:left;
}
#east {
float:right;
clear:right;
}
<!-- Mandatory Dimensions -->
#ct {
width:640px;
}
#west {
width:180px;
}
#east {
width: 80px;
}
#center {
width: 380px;
}
<!-- This Example Customizations -->
body {
font-size:13px;
vertical-align:middle;
margin:0;
padding:0;
}
#north {
height:40px;
color:white;
background:#203d8e;
}
#navlinks {
height: 24px;
color:blue;
background:#ffc800;
}
#west, #center, #east {
height:400px;
}
#west, #east {
color:white;
background:#203d8e;
}
#south {
height: 30px;
background:#ffc800;
}
#center {
background:#e8e8e8;
}
north
west
center
east
south
Works perfectly cross-browser in both standards compliant mode and quirks mode.
Online example of the above: Simplest 3 Columns Layout with CSS Example
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.
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
9 Responses
Yes, it was superseded by Simplest 3-Column Layout. I’ll update blog too.
You example for this page comes up with not found.? has it been taken off?
@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.
Saki, the example page link is dead. 🙁
I’m learning ExtJS and your Examples.ExtJS are very helpful … thanx you very much for your dedication on ExtJS.
@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!
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
Sure, here is link: Simplest 3 Columns Layout with CSS Example
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?