The Art and Science of Layouts

Understand the choices

1. Where the page is "pinned" (fixed-location or floating)
   1. AListApart is fixed-location, extra space on window is to one side (usually right side)
   2. Western's home page is floating, extra space on window is around both sides
2. How the page grows as window is enlarged (expandable or fixed-width)
   1. AListApart is fixed-size, page is always the same width no matter how large the window is.
   2. CSS ZenGarden is expandable, one or more "columns" of the page get larger as window gets larger;

Basic Layouts - how to do them

Sample File - layout.html - right click and save (also contains css in top of code)

1. Design: Figure out what sections you will have (header, footer, nav, sidebar, body etc), and which ones will be in the same "row" of your design (next to each other), and which on a "row" by themselves. Draw this up so you don't get confused. Name each section on the diagram - these will become divs. If more than one are in the same "row" write a container name next to the row on your diagram. This will become a div containing the sections in this row.
2. HTML: Start with the Code Skeleton. Then using the named page sections (header, footer, etc) from your design, create a div or class for each, nested appropriately in the html. In each div place some text with the section name so you'll know what you're looking at. Later you'll replace this with real content or images.
3. HTML: Create a div around the whole content so you can set the width of your whole page at one whack - call this "container" or "wrapper" or something obvious
4. HTML: Where 2 or more will be NEXT to each other in a horizontal row, wrap them all in another div and name it "row-wrap" or something obvious. For example:
   <div id="row-wrap">
     <div id="left"></div>
     <div id="right"></div>
   </div>
   Start with the sections in the same order you see them on the page.
5. CSS: If you want a centered layout (fixed-size floating or expandable) apply this line to the very top of your css:
   *{margin:0 auto; }
6. CSS: Create a selection in your css for each div and assign it a temporary background color for a section or a temporary border for a container. For example:
   div#header {background-color:red;}
   This helps to check your layout.
7. CSS: Set Width of whole content wrapper;
   1. Fixed and Floating are both static sizes - this means there is a pixel or em width for your design and probably for each div. The "leftover" width on the page is colored with the background color of the body element. (On these pages its an off-pink).
   2. Expandable is not static - this means there is a % width to at least one of the major elements. 100% means there will be no space around the content, a more common 90% or so leaves some body element around the edges. The body background color will determine what color this is.
8. CSS: Set widths of sub-sections that have to fit in a row together. They should add up to the full width for fixed systems.
   1. NOTE for partially expandable systems: if you have sidebars that are fixed and a center that is expandable, give widths to side sections BUT NOT to expandable portion.
9. CSS: Add floats and clears.
   1. Add float left to those things that you want something else to flow around to right.
   2. For partially expandable system with left menu and right sidebar and center expandable section
      1. EASY METHOD: float menu left, float sidebar right, and leave center to squeeze in between them without a float or width. THIS REQUIRES that you list the two fixed-size elements first in your html, then let the expandable one take the rest of the space.
      2. If you don't want to limit yourself this way, here are some more sophisticated solutions:
         1. http://www.alistapart.com/articles/holygrail
         2. http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
         3. Many others listed in a chart
   3. Add clear to elements, like footer, that you want to stop floating and go back to full width.
10. Look at the design and decide if this is what you want. You may want to set a back-ground color on the body now to offset the part of the window you're using from the part you're not.
11. Start adding the appropriate images or background-images to make it look like the real thing, shedding the temporary background colors as you do so. At this point you may need to add height. Make one change at a time so you don't lose track of what parts of the CSS did what. Add comments liberally to keep track of what you did.
    1. If you have difficulties with getting rid of space, remember that browsers apply default spacing at the top of the page, around paragraphs, around everything. You might want to start with NO space around anything by adding this to the VERY first line of your css:
       1. *{margin:0; padding:0;}
       2. OR for expandable: *{margin:0 auto; padding:0;}
12. Move the CSS from the header of your code to a separate file. You may want to call this layout.css to identify what it's for. Add a link statement to the header of your code to call this css.
13. Solutions for unequal column lengths and background not going all the way down:
    1. For fixed width: Create a single background file that includes the backgrounds of all the others. Apply it to the wrapper around the row and Repeat-y to copy this down the page.
    2. For expandable layouts: add as many wrappers as you have different backgrounds and apply one background to each:
       

       <div id="left-color">
         <div id="right-color">
           <div id="center-color">
             ...content here
           <div>
         <div>
       <div>