website template image website template image

fluidity.com

Welcome to Fluidity.com

Hello and welcome to fluidity.com a template by drd
I wanted to finish 2005 with something a bit different. Although this template appears to be simple and the CSS is quite small, it is highly versatile. Fluidity.com is a fluid layout which has all the CSS needed to create one, two, three or four column layouts.
Because Fluidity.com uses a row div called "rowcontainer" to keep the columns together, you can mix and match the number of columns on one page just like I have in the standard configuration of the template.

A note from the author

You can see more of my work on my site: www.davereederdesign.com. If you have any problems using the template or simply want to say "hi" then it would be great to hear from you!

Hope you have fun with the template,

-Dave

Careful testing

Careful testing of any webpage should be top priority, so I've validated the code and tested the template in the following browsers:

Controlling the columns

website template image

Of course, the columns do not have to be of equal proportions. You could specify one column that was a quarter of the screens width and another which was three quarters. Simply specify a column in the xhtml with a class name that corresponds to the relevent column in the CSS.

Now I'll leave you with some Lorem Ipsum to fill the rest of the space :)

Example of three columns!

Nam ac ligula. Morbi cursus nonummy leo. Duis aliquet. Quisque rhoncus, odio eget malesuada imperdiet, magna lectus iaculis velit, in tincidunt odio sapien nec lacus. Curabitur ullamcorper metus ac justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer volutpat leo sit amet eros. Sed vestibulum porta sapien. Nunc venenatis tortor ut massa. Aliquam ut eros. Sed tempus nibh id felis. Cras vehicula tincidunt orci. Mauris viverra, diam id volutpat condimentum, dolor nisl pretium nisi, ut blandit nisi neque tempus lectus. In ultricies metus quis est. Integer lobortis pretium elit. Curabitur et turpis. Morbi vitae sem at odio sagittis consequat.

Example of three columns!

Proin arcu sem, tempor vel, luctus sagittis, dictum sit amet, lectus. Phasellus leo ante, elementum id, pellentesque non, cursus eget, purus. Aenean lobortis laoreet quam. Nullam enim. Aenean malesuada, diam in tempor feugiat, nibh arcu feugiat eros, ut rutrum dolor diam sed nulla. Etiam sit amet nisl at dui cursus auctor. Nunc vulputate est et leo. Curabitur dolor leo, vulputate elementum, egestas viverra, gravida eget, nisi. Suspendisse sed odio. Duis sed dolor. Nulla euismod ipsum vitae quam. Sed sed libero. Nam sed mauris eu sem fermentum varius. Aliquam porttitor consectetuer ipsum. Duis sagittis ipsum sed justo. Vestibulum consectetuer.

Example of three columns!

Quisque sed nisi et quam aliquam volutpat. Aliquam erat volutpat. Vivamus id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ac lorem. Proin venenatis rutrum nisl. Donec molestie laoreet tortor. Maecenas velit. Vivamus pulvinar pellentesque eros. Nulla feugiat. Quisque sit amet nulla mattis dolor adipiscing bibendum. Nam odio urna, convallis eu, vestibulum eu, molestie in, libero.

Example of four columns!

Morbi metus diam, faucibus tincidunt, mattis et, tristique in, massa. Pellentesque ac nulla in neque interdum suscipit. Nunc sodales. Curabitur a mauris. Maecenas eu elit at tortor convallis congue.

Donec id tortor ut ligula sagittis feugiat. Integer cursus. Vestibulum tellus lectus, tincidunt sed, imperdiet eu, congue et, diam. In eget diam a tortor pulvinar mattis.

Example of four columns!

Quisque et tellus. Nulla egestas rutrum massa. Etiam nisi. Morbi mauris urna, auctor vel, ullamcorper et, cursus luctus, magna. Fusce tristique. Vestibulum varius auctor dolor. Donec bibendum faucibus nibh.

Duis dapibus blandit erat. Nam orci. Ut justo. Fusce ornare neque vitae leo. Nullam laoreet. Etiam adipiscing, arcu nec dapibus laoreet, nunc nibh facilisis erat, quis ultricies purus odio at tellus.

Example of four columns!

Curabitur at velit id massa gravida tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi convallis. Sed aliquam nunc non quam. Nulla porttitor convallis erat. Cras venenatis. Quisque id dolor. Vivamus vitae purus. Duis posuere, risus sit amet viverra bibendum, augue eros pellentesque nibh, vitae mollis nisl libero nec justo.

Example of four columns!

Ut a nunc. Ut quam. Proin ullamcorper, leo ut varius luctus, nulla purus ultricies nibh, ac ornare libero elit non elit. Donec cursus vestibulum mi. Sed risus. Pellentesque justo. Nunc ac elit.

design: davereederdesign.comCopyright © 2005 Yourcopyright. All Rights Reserved