Monday, October 30th, 2006

Dynamic Drive CSS Layouts

Category: CSS

<>p>Dynamic Drive has created a library of tableless, CSS page templates that you can plug into sites and applications.

Choose how fixed and fluid you are, the layout type, and download away.

CSS Layouts

Related Content:

16 Comments »

Comments feed TrackBack URI

What? No elastic layouts? Shame. :-(

Comment by Philip Withnall — October 30, 2006

Philip: Did you eveb click through to the site? There are “fluid” layouts listed.

Comment by Me — October 30, 2006

…very “Bulletproof”, as Dan Cederholm would say. Looks like a chapter from his book.
Cool to have them pre-built, many thanks

Comment by Mark Holton — October 30, 2006

A must have bookmark!

To bad that they don’t discuss the problems with auto expanding columns.

Any link suggestions on that?

Comment by Daniel Kolvik — October 30, 2006

Um…you mispelled the headline. (Perhaps you should upgrade to Firefox 2. ;-) )

Comment by Keith — October 30, 2006

Oops, and I misspelled misspelled! I suppose I deserve that.

Comment by Keith — October 30, 2006

Still doesn’t address some of the standard shortcomings of CSS vs Tables.

Without some major css hacks, if you want a colored sidebar, you better make certain that there is more text in it than in the content area. Beyond this, these layouts are nearly worthless to anyone coding CSS if they’ve even remotely heard the word FLOAT.

I tried out a few of them to see if there were any new tricks, and there weren’t. Perfect for a beginners site or as an example in my classroom, but not for this site…

Comment by zampino — October 30, 2006

[...] Via Ajaxian. tagged ajax, intranet, jsf, jsp, look feel, php, taller and web [...]

Pingback by Iago Blog » Layouts CSS para tus aplicaciones web — October 31, 2006

Hi,

still already known CSS layout… i agree with Leif, my needs was to have one header:
in the header there are tabs using li tags, the header should have a min width to keep tabs inline,
for the content: 2 columns, the right column not fixed (should expand regarding the content, in fact a tree) the main content should be also fluid,
the footer should STICK to the bottom and the background of the left column should be 100% of the height (as it could be done with table layout).
I try to figure out with a lot of CSS samples and hacks, and the i finally found a solution but… with javascript, as i need to know the height and width of the windows to resize left column and also the header and footer width in case of main content are too large…
If someone can show this kind of layout just made CSS ;-)

ps: sorry for my english, i know it sucks :-)

Comment by Julien Gomez — October 31, 2006

[...] 16:17 y está archivada en: (x)HTML, CSS, Recursos. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]

Pingback by Webmaster Libre » Archivo del weblog » Plantillas CSS de Dynamic Drive — October 31, 2006

I thought these looked good and found what others have also noted: the colored columns need to have more content than the non-colored columns or else they don’t extend the full height of the content area. In most cases, the main content area (usually the non-colored portion) will be longer and it won’t work.

The way I have resolved this issue (or hacked around it, perhaps) for a two column layout is to have a div container around the columns with a background color set the same as one of the columns (in my case the left fixed column). Inside this container are two div elements. One is floated left (it could also be right) with a fixed width and a background color the same as the main container. The other is not floated and has a background color of the main content (usually white). It also has a margin-left of the same width as the first div. The footer follows and contains a clear: left (or right or both) style.

It seems to work in all the major browsers (including Safari and IE 7). Here’s a simple sample with inline styles.

One of these days I suppose I should get a blog and I can put things like this on it.

Comment by Rangi Keen — November 1, 2006

[...] http://ajaxian.com/archives/dynanic-drive-css-layouts [...]

Pingback by sephi’s tips!»Blog Archive » Dynamic Drive CSS Layouts — November 8, 2006

It may have been a combo of issue’s but it seems that IE7 doesn’t recognize what to do with . When I was making a CSS layout IE7 seemed to ignore this and my floated items went out of their containers. Changing the br to a div solved the problem.

Anyone else experience this?

Comment by justin — July 5, 2007

Agreed.

Comment by Kyle — July 27, 2007

Couldn’t agree more

Comment by Misspelt — September 7, 2007

me too.. I’m agreeing on this..

Comment by mountlaurel — January 10, 2008

Leave a comment

You must be logged in to post a comment.