CSS Depot

The first steps I take when I start implementing a new layout are always the same:

1. Create a basic, empty XHTML structure
2. Try to remember how I create that 3 column, semi-liquid layout with a footer and the columns extending the full height or whichever layout I need.
3. Try to work out why the version I’ve implemented this time around breaks in other browsers.

To avoid taking that path again I collected templates for the layouts I usually use so I could just copy them the next time, and decided I might as well share them: Voila, CSS Depot was born.

The individual files are standalones with no external CSS influencing the layout model. Each div used for laying out the page is colored to make it easier to see what’s going and all the layout specifc CSS rules are visible when viewing the page in your browser - no need to hunt through the HTML source or external files.

The files should all be valid XHTML1 and render (practically) the same in IE6 (Win), IE5.5(Win), Opera 7, Firebird 0.7, and Safari 1.1 hopefully making them an excellent basis to build your next killer webdesign on.

Comments and Trackbacks

Jakob Skjerning of mentalized informs us that he has created a set of basic CSS templates to avoid having to repeatedly reinvent the wheel. And he has been kind enough to share. So check out the CSS Depot....

Read the rest on dwh!{dezwozhere:blog}

Hi

Nice idea. Especially for someone less-experienced :)

Dan

ps. Off-topic. IMHO the link to the comments above the text is VERY uncomfortable to use. :)

hi ! great site but one little problem the css layout 3 columns, all fluid, with footer fails in IE 6.0 and i wanted to use it :(
any fix ? if so can u please send it to me. 10x in advance

Meh, stupid IE seems to not agree that 1 + 1 + 20 + 20 + 58 = 100 in all cases... I have fixed the layout to counter that error in IE.