HTML & CSS: Design and Build Websites

15

LAYOUT

• Controlling the position of elements
• Creating site layouts
• Designing for different sized screens

In this chapter we are going to look at how to control where each element sits on a page and how to create attractive page layouts.

This involves learning about how designing for a screen can be different to designing for other mediums (such as print). In this chapter we will:

• Explore different ways to position elements using normal flow, relative positioning, absolute positioning and floats.
• Discover how various devices have different screen sizes and resolution, and how this affects the design process.
• Learn the difference between fixed width and liquid layouts, and how they are created.
• Find out how designers use grids to make their page designs look more professional.

KEY CONCEPTS IN POSITIONING ELEMENTS

BUILDING BLOCKS

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.

Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. You can control how much space each box takes up by setting the width of the boxes (and sometimes the height, too). To separate boxes, you can use borders, margins, padding, and background colors.