Layout

Go to Previous Section:
BoxesThis is the 12th section of the CSS Getting Started tutorial; it describes some ways to adjust the layout of your document. You change the layout of your sample document.

Information: Layout

You can use CSS to specify various visual effects that change the layout of your document. Some of the techniques for specifying layout are advanced, and beyond the scope of this basic tutorial.

When you design a layout to look similar in many browsers, your stylesheet interacts with the browser's default stylesheet and layout engine in ways that can be complex. This is also an advanced subject, beyond the scope of this basic tutorial.

This page describes some simple techniques that you can try.

Document structure

If you want to control the layout of your document, then you might have to change its structure.

Your document's markup language might have general-purpose tags for creating structure. For example, in HTML you can use the <div> element to create structure.

<h3>Numbered paragraphs</h3>
<div id="numbered">
  <p>Lorem ipsum</p>
  <p>Dolor sit</p>
  <p>Amet consectetuer</p>
  <p>Magna aliquam</p>
  <p>Autem veleum</p>
</div>

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}

Size units

So far in this tutorial, you have specified sizes in pixels (px). These are appropriate for some purposes on a display device like a computer screen. But when the user changes the font size, your layout can look wrong.

For many purposes it is better to specify sizes as a percentage or in ems (em). An em is nominally the size of the current font (the width of a letter m). When the user changes the font size, your layout adjusts automatically.

Text layout

Two properties specify how the content of an element is aligned. You can use them for simple layout adjustments:

text-align

Aligns the content. Use one of these values: left, right, center, justify

text-indent

Indents the content by an amount that you specify.

These properties apply to any text-like content in the element, not only to actual text. Remember that they are inherited by the element's children, so you might have to explicitly turn them off in the children to avoid surprising results.

h3 {
  border-top: 1px solid gray;
  text-align: center;
}

Floats

The float property forces an element to the left or right. This is a simple way to control its position and size.

The rest of the document's content normally flows around the floated element. You can control this by using the clear property on other elements to make them stay clear of floats.

ul, #numbered {float: left;}
h3 {clear: left;}

The result looks like:

(A little padding is needed on the right of the boxes, where the border is too close to the text.)

Positioning

You can specify an element's position in four ways by specifying the position property and one of the following values.

These are advanced properties. It is possible to use them in simple ways—that is why they are mentioned in this basic tutorial. But using them for complex layouts can be difficult.

relative

The element's position is shifted relative to its normal position. Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.

fixed

The element's position is fixed. Specify the element's position relative to the document window. Even if the rest of the document scrolls, the element remains fixed.

absolute

The element's position is fixed relative to a parent element. Only a parent that is itself positioned with relative, fixed or absolute will do. You can make any parent element suitable by specifying position: relative; for it without specifying any shift.

static

The default. Use this value if you need to turn positioning off explicitly.

Along with these values of the position property (except for static), specify one or more of the properties: top, right, bottom, left, width, height to identify where you want the element to appear, and perhaps also its size.

<div id="parent-div">
  <p id="forward">/</p>
  <p id="back">\</p>
</div>

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}

Action: Specifying layout

1. Change your sample document, doc2.html, and stylesheet, style2.css, using the examples above in the sections Document structure and Floats.
2. In the Floats example, add padding to separate the text from the right border by 0.5 em.

Challenges

Change your sample document, doc2.html, adding this tag to it near the end, just before </body>.

<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

If you did not download the image file earlier in this tutorial, download it now, and place it in the same directory as the other sample files:

Predict where the image will appear in your document. Then refresh your browser to see if you were correct.

Add a rule to your stylesheet that places the image in the top right of your document.

Refresh your browser and make the window small. Check that the image stays in the top right even when you scroll your document:

(A) The oceans

• Arctic
• Atlantic
• Pacific
• Indian
• Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

 See a solution to this challenge.

What next?

Go to Next Section:
TablesYou have just about covered all the topics in this basic CSS tutorial. The next page describes more advanced selectors for CSS rules, and some specific ways that you can style tables.