Simplest 3 Columns Layout with CSS
8. April 2008 – 04:30After 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 --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <link rel="shortcut icon" href="../img/extjs.ico"> <title>3 Columns Layout Example</title> <!-- Layout Mandatory Styles --> <style type="text/css"> #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; } </style> <!-- Mandatory Dimensions --> <style type="text/css"> #ct { width:640px; } #west { width:180px; } #east { width: 80px; } #center { width: 380px; } </style> <!-- This Example Customizations --> <style type="text/css"> 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; } </style> </head> <body> <div id="ct-wrap"> <div id="ct"> <div id="north">north</div> <div id="navlinks">navlinks</div> <div id="west">west</div> <div id="center">center</div> <div id="east">east</div> <div id="south">south</div> </div> </div> </body> </html> <!-- eof -->
Works perfectly cross-browser in both standards compliant mode and quirks mode.
Online example of the above: Simplest 3 Columns Layout with CSS Example
9 Responses to “Simplest 3 Columns Layout with CSS”
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?
By ZeusTheTrueGod on Apr 8, 2008
Sure, here is link: Simplest 3 Columns Layout with CSS Example
By jsakalos on Apr 8, 2008
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
By Jan Rosa on Apr 10, 2008
@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!
By jsakalos on Apr 10, 2008
I\’m learning ExtJS and your Examples.ExtJS are very helpful … thanx you very much for your dedication on ExtJS.
By arse_nix on May 13, 2008
Saki, the example page link is dead.
By DMage on Jun 2, 2008
@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.
By Saki on Jun 3, 2008
You example for this page comes up with not found.? has it been taken off?
By saidyjade on Feb 28, 2009
Yes, it was superseded by Simplest 3-Column Layout. I’ll update blog too.
By Saki on Feb 28, 2009