Tutorial: Negative Margin Layout

In this tutorial, you'll explore how to create a multi-column, float-based layout using the negative margin technique discussed in Section 11.1.1. Download the files as described for the previous tutorial. The files for this tutorial are contained inside the folder named chapter_11 → layout2.

Centering a Layout

Unlike the last exercise, all the HTML is already in place for this page. All you have to do is add CSS to create the layout. There are six major sections to the page, each enclosed in a <div> tag with an ID applied.

Turning a liquid design into a fixed width design is simply a matter of wrapping all the HTML inside the <body> tag in a new <div> tag and then creating a style that sets the width of the div. If you'd prefer to have the fixed design centered in the middle of the browser window, see the next tutorial.

Figure 11-20. Turning a liquid design into a fixed width design is simply a matter of wrapping all the HTML inside the <body> tag in a new <div> tag and then creating a style that sets the width of the div. If you'd prefer to have the fixed design centered in the middle of the browser window, see the next tutorial.

  1. In a text editor, open the chapter_11 → layout2 → start.html file.

    Figure 11-21 shows the basic structure of the HTML (left) and the final result you're aiming for (right). Currently, the divs just stack one on top of the other, because you haven't added any CSS layout—yet.

    Begin by creating a fixed width layout and centering it in the middle of the browser window.

  2. In the <head> region of the HTML, place your cursor between the opening and closing <style> tags.

    There's already an external style sheet attached to the page, ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial