Cover Page by Jon Duckett

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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.

image

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.

image

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required