Professional Web Design: Techniques and Templates- P10: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving one's design and developer skills is essential for every Web designer in today's marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques | 432 Chapter 16 Tips and Techniques Figure If content is decreased in the left column not only does the right column move below the footer but the footer moves up. Note Because the photo in the left column of Figure is floated it is not included in the document flow meaning other elements could pass above and below it as well as in front of and behind it. If the amount of content is going to change dynamically this design structure may not be the best solution. The designer may consider not including a footer area and assigning different positions to the DIV tags or the designer may want to use the design technique described in Chapter 12 or 13 that provides a solution to creating equal column designs. Centering a Fixed-Width Design Depending on the requirements some sites need to be designed with liquid lay-outs that is they fill the full width of the screen. Yet others require a fixed width. HTML and XHTML used to make the process simple but with the varied browser support of CSS the process is a little more involved. One way requires Please purchase PDF Split-Merge on to remove this watermark. Centering a Fixed-Width Design 433 wrapping two different DIV tags around the body. Following are the steps to accomplish this task 1. Add a rule to the style sheet that centers the fixed-width design which is set at 770 pixels for this example. This rule centers the body for IE 5 and . It would be extremely rare for this code still to be necessary but it doesn t hurt to explain its use. a5-body-center text-align center 2. Add a second rule that sets the text-align property to left assigns the left and right margins to auto and defines the positioning as relative. Setting the positioning to relative will allow the design to be positioned relative to the DIV tag in which it is nested. The auto value of the margins will tell the browser to set the margins evenly on both sides thus centering the code. The text-align left code is added because the
