Wow, in just over one month the CSS Layout Generator has generated over 2659 not including the ones that have been deleted
Simple printing styles have now been added to hide the left and right columns when printing.
I assumed most people would only want to print the main content in the center column but of course it's easy to change it to suite your needs.
CSS Layout Generator
Well done!
CSS Layout Generator
It's a nice piece of work
One thought - it looks like the column widths are restricted to pixel-based dimensions - how about supporting percentages or other units, too?
CSS Layout Generator
Doug Livingstones 3 column layout is the best fluid design I have seen, that does not drop the RH column down below the content when resizing the browser.
Try all the other 3 column 'holy grails' and they all suffer resizing problems.
Unfortunately its does have some problems like layout does not allow % based widths for left and right columns.
It works a bit like this
The Content area is % based, but it has 2 large borders.
--------------------------------
border | content |border |
--------------------------------
The Left and right columns are then placed over the borders. As you resize the content resizes but the right column just moves in with the border.
Of course that does not mean there can not be a second layout generator
Day
CSS Layout Generator
At first I was developing a simple float layout that worked on % widths for the columns.
Most people seem to want at least one fixed width column which makes it really hard to have percentage widths for the other columns.
I may add some other popular layouts to the generator at a later date.
CSS Layout Generator
If it could go over the road and buy me an orange juice, that would be good, too.
CSS Layout Generator
I have added the following code to a 2-column layout with header and footer generated by the program - it would be great if these tweaks were added to the results for everyone. I found them necessary to get a consistent layout in IE5, which had problems otherwise.
In the CSS for the #outer div:
border-top:0px; /* prevents ie5.0/win from 1px gap at top revealing background colour */ margin-bottom:-1px; /* prevents ie5.0/win from 1px gap at bottom revealing background colour */
CSS Layout Generator
Thanks Chris,
I'll have a look into it over the next couple of days.
CSS Layout Generator
Thanks man, I forgot all about this and it just came in handy.
It appears to bug out on IE6 as well btw. POS software.
CSS Layout Generator
Hey Tony i took a look at the generator and found a typo. I believe "XTML" should be "XHTML" unless it was intentional
CSS Layout Generator
Hi Fruitcake,
Thanks very much for pointing it out.
Over 32,000 layouts generated and nobody mentioned it :roll:
I wonder if like me they didn't notice.
The old copy and paste got me again, all the XHTML options were XTML.
At least it generated the correct doctype after you selected the misspelled options.
Thanks