Web Design with HTML and CSS

160

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

The eff ect of margins and padding on your fi xed-width layout

In this section, you will add space between the sections of text on your page (which have

margins of zero from the reset style sheet). You will learn some strategies for controlling the

layout; however, the goal of this exercise is not to show you a single method of CSS layout,

but to help you understand the diff erent options, which should help you in your future

projects to decide which method to use.

In this fi rst exercise, you will add padding to the sidebar element.

1 Preview the page in your browser and notice the lack of space between your text and the

edge of your sidebar. Also, notice the width of this sidebar: if you measure it based on the

navigation bar above, the sidebar ends approximately one-third of the way through the

“Recipe” list item.

A guide is added in this screenshot to show where the sidebar ends in relation to the navigation bar.

The width of this sidebar is set to 300 pixels; increase the padding of the sidebar by

following the instructions in the next step.