Creating Page Layouts with CSS

Objectives & Skills

• Set display properties
• Create a reset style sheet
• Define a background image
• Set background image properties
• Use browser extension styles
• Explore fixed, fluid, and elastic layouts
• Float elements in a Web page
• Set margin and padding spaces
• Format an element border
• Create rounded corners
• Display an element outline
• Explore absolute and relative positioning
• Work with overflow content
• Explore clipped objects
• Stack objects in a page

Resources & Files

• 20 Examples of Bad Web Design
• Control the Positioning
• CSS Design Examples
• Web Style Guide - Page Design

Layout Considerations

When designing a website layout for a large audience, the designer must consider the following potential differences among visitors:

• Screen resolution,
• Browser choice,
• Whether or not the browser is maximized,
• Extra toolbars open in the browser (History, Bookmarks, etc.),
• Even the operating system and hardware.

Read more here...