Generate a Layout before visiting this page.
This is really just a step in the right direction, you still have a lot to do before your site is ready to go live. If you are just starting out, learning to do it yourself, by hand, in a simple text editor can be very rewarding, although it won't be easy. Below is some information that will help you on your journey, good luck.
Layout Hints
These simple tips may save you from having to use complicated hacks on your site. Make sure to also check out the links in the Layout Hints box.
- Column Padding
- The box model is handled incorrectly by some browsers, which causes padding and borders to be added to an elements width. So applying padding directly to a column will change the way the widths are calculated and could mess up the floated columns. To get around this problem apply margin to the children of the column instead. #maincol p{margin:1em;}
- Overflowing Content in Fluid Layouts
- To avoid content escaping or overflowing the columns there are a couple of things you can do.
- Make sure the content fits within the column at different window sizes or resolutions, images and long text such as urls could be a problem here.
- Avoid setting fixed widths or 100% widths with margin, padding or borders on block level elements within the column (p, div, ul ).
Rounding Up
For help with styling your template, or to let me know your thoughts on the CSS layout Generator join the CSS Forum community. You are welcome to modify the files in any way you see fit. If you use the generator, I would apprieciate a link to http://csscreator.com/ somewhere on your site. It also nice to hear from people who use the system, and to hear suggestions or of errors. Ok it's not so nice to hear of errors, but If you don't tell me about them I can't fix them. For updates please follow @csscreator or @taslett on twitter or subscribe to the RSS feeds.