Cascading Style Sheet Fixed Width Layout Tool
by Paul Flyer
Designing layouts in CSS can be a pain, especially for beginners. There is so much to think about and consider, especially when trying to maintain standards, accessibility and browser rendering. Then add all the various ways one can TRY and accomplish various layouts. It can be OVERWHELMING. While the code behind CSS is quite simple for anyone to understand, layouts in CSS challenge the best of developers. Here is a tool I have found to be indispensible in helping me with layouts. Cleva Treva’s CSS Source Ordered Variable Border 1-3 Columned Page Maker is a tool that will produce a 1 to 3 column fixed width layout.
It is fairly simple to use. The Generator screen has a variety of configurations the user can set:
I will not go into them in detail. Most of them are self explanatory. It is easy enough to play around with the tool to figure out what each setting accomplishes. Not all settings are fully activated, which is my only complaint. They really should set up a donate button to help him have the funds to finish it off.
The tool can create your standard three column layout; a column on each side with a content column in the center,
two column layouts with either a right or left sidebar,
or one can even create the sidebar so it intrudes into the header and footer.
The tool will also create the code for the necessary hacks to make sure the layout works in all the major browsers. Now, I do not think, as of this writing, it has been updated to ensure IE7 compatibility.
Once a layout is generated, the code can be copied and pasted from the textarea on the display page into your favorite html editor. Do not save the generated layout page itself as it contains extraneous code.
Rememeber, this tool creates a fixed width layout. The main content column can be up to 760px and each column can be up to 200px. The maximum width would be 1160px.
The layout is also ordered so that the content appears first in the code above the sidebars.
I do wish the tool would be able to create a three column layout with the two sidebar columns adjacent either postioned to the left or right.
Overall, it is a very useful tool. Beginners will find it extremely helpful.
[tags]css, cascading style sheets, html, layout[/tags]
Be sure to review our list of recommended web tools.
