Column 1 (main content)

*lite: like a KISS ? - lite is that easy !

Visualization of the layout rendering Ever bored all the time of those YAULs (YAUL stands for Yet Another Useless Layout), because when you resize the browser window, try them in M$IE or apply them to your specific web content you realize that they break at some point? And what's even worse you then give up and go back to the stable but accessibility unfriendly layout? No more! The light is coming! :D
*lite is here and makes all my previous attempts obsolete. It seems I've finally created something what's really usable in all major browsers and behaves good in any common web needs situation. Moreover it's pretty simple, light and universal too. In short, most probably my search for the Holy Grail in tableless layouts has successfuly ended.

Tested in Firefox, IE6, Konqueror, Opera and Safari browsers with one, two and three column setups including header and footer and various content.
And the best thing is *lite is free for everyone! Just explore or go straight and use it, learn how it's done, modify, customize, extend and have fun! :)
I'll update the main page and tests from time to time to put another useful info about it there.
If you find any bugs, ideas or comments about it, please share with me and others in my blog.
I hope you'll find it useful.

luci(ash) d' being aka Lukáš Mašek

changelog

06/05/11
replaced display: table-cell to display: block for the wrapper div (caused trouble rendering of right column, especially in Firefox)

known issues

  • In Firefox < 1.5 is a bug which causes the footer gets displayed under the column 2 (left column) when the height of the column is higher than the main content

let's try some test content

This is content of the column 1. It can be short, longer or very long. Lorem ipsum dolor sit amet, test link consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

a list and floated image test

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
Visualization of the layout rendering

how does it work ?

How does the positioning work using floats and negative margins

how does it work in MSIE ?

How does the positioning work in MSIE 6 ?

get the css code

The base layout you can download and then call it from your custom stylesheet using e.g. @import "lite.css"; on the top of your stylesheet. Then you can redefine its default values in your CSS. For example see the neatlite.css of this page ! :)


a table test

table_heading
table_text

Short tabletext or very long (unwrappable).

Column 2

a Menu as a list

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5

This is content of the column 2. It can be short, longer or very long.Test link Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet Test link consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

another list as a Menu

  • item 1
  • itemitem 2
  • itemitemitem 3
  • itemitemitemitem 4
  • item 5

Column 3

another list as a Menu

  • item item item 1
  • item item item 2
  • item 3
    • item item item 1
    • item item item 2
  • item 4
  • item 5

This is content of the column 3. It can be short, longer or very long.Test link Ma consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet quande lingues coalesce, consectetuer adipisci consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ng elit, sed diam nonummy nibh euismod tincidunt ut laoreet li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.