How to use CSS for Layout

Page Index

Introduction

One of the greatest benefits offered by CSS is the opportunity to set the layout of a document on a stylesheet, rather than in the page itself. Before CSS, it was necessary to use HTML tables to specify the layout of a page.

CSS enables the web developer to specify, for instance, how far elements will be away from each other, and which elements will occupy which area of the page. Positioning is the most powerful tool; however, it demands a more in depth understanding of CSS than this section offers. We strongly encourage anyone planning significant web development who can devote some time to truly understanding the principles of CSS to visit the readingroom for more resources on the topic and investigate positioning in particular.

Visit the Readingroom

Using margins, padding and float, you can control the layout of a simple and elegant site. This page provides some step-by-step information about controlling the layout of a webpage using these tools.

Using margins

As discussed on the CSS page, a margin's length determines how much blank space is created around an element, either in pixels, ems or percentages. Remember that percentages with margins are set relative to the element, not relative to the page. The following code makes the margins on all sides of the body element 50 pixels.

body {margin: 50px;}

Margins can be applied to any element in CSS. The following code sets the margins for the body, tables, h1s, h2s, and paragraph text all to 50 pixels.

body, table, h1, h2, p {margin:50px;}

Of course, setting all margins to the same thickness may not result in an attractive page. The following code sets varied margins to the elements, and even to various sides of the elements, to give a more attractive presentation.

body {margin: 50px;}
table {margin: 10px 5px 10px 100px;}
td {margin: 0px;}
h1 {margin-left: 350px;}
h2 {margin: 10px -10px -20px 10px;}
p {margin: 10px 65px 10px 65px;}
img {margin-right: 80px; margin-top: 20px;}

Using padding

Padding is the area between the border of an element and the content area, such as paragraph text or the outer edge of an image. Padding length can be set in pixels, ems or percentages. By setting its length, in pixels, ems or percentages, you can control how much distance there is between a border and, say, text or an image. Like with margins, it is possible to set padding on only one side of an element, or to set different paddings on different sides. The following code would make padding on all four sides of a table 50 pixels thick.

table {padding: 50px;}

The following code sets the padding for the body, tables, h1s, h2s, and paragraph text all to 50 pixels.

body, table, h1, h2, p {padding:50px;}

Like with margins, setting padding on all sides of all elements to the same width might not be the most attractive option. The following code offers more variation in padding width to result in a more attractive layout.

table {padding: 10px 5px 10px 5px;}
td {padding: 3px;}
h2 {padding: 10px;}
p {padding: 10px 15px 10px 15px;}

Using float

The float property enables you to determine where an element will appear in relation to its containing element - either on the right or the left side. Float does not affect the layout of other elements on the screen; they essentially "flow around" it. The following code will make images appear on the right side of the body.

img {float: right;}

The following code will make the body, images, tables, h1s, h2s, and paragraph text all float to the right side of the page.

body, img, table, h1, h2, p {float: right;}

Not only does floating an entire document not necessarily result in an attractive page, but floating even a single element can cause them to bundle awkwardly. The following code assigns float only to the image, and ensures that it will not affect the element directly following it by using the 'clear' property. The clear property dictates that a specific element will essentially clear the floated element either to the left of it, the right of it, or both sides. With this simple page, however, clear is not necessary. The following code sets float for only the image to achieve a more elegant design.

img {float: right;}

The final product

The following code combines all code given so far in the instructions on this page:

body {margin: 50px;}
table {margin: 10px 5px 10px 100px; padding: 10px 5px 10px 5px;}
td {margin: 0px; padding: 3px;}
h1 {margin-left: 350px;}
h2 {margin: 10px -10px -20px 10px; padding: 10px;}
p {margin: 10px 65px 10px 65px; padding: 10px 15px 10px 15px;}
img {margin-right: 80px; margin-top: 20px; float: right;}

The result of combining the layout code established on this page with the styling code that was established on the Style page uses CSS exclusively for style and layout. The CSS code is as follows:

body {background-color: #4682B4; color: black; margin: 50px;}
table {background-color: #EECBAD; border-color: darkblue; border-width: thick thin thick thin; border-color: darkblue; border-style: dashed none dashed none; margin: 10px 5px 10px 100px; padding: 10px 5px 10px 5px;}
td {border-right: 0px; border-left: 3px; border-top:3px; border-bottom:0px; border-style: solid; border-color: darkblue; margin: 0px; padding: 3px;}
h1 {font-weight: heavy; font-style: italic; font-size:30; margin-left: 350px;}
h2 {font-weight: medium; font-style: oblique; font-size:20; background-color: lightblue; margin: 10px -10px -20px 10px; padding: 10px;}
p {font-weight: light; font-variant: smallcaps; font-size:16; color: #00009C; background-color: #F0F8FF; border-width: thin; border-color: red; border-style: dotted; margin: 10px 65px 10px 65px; padding: 10px 15px 10px 15px;}
img {border-width: thin; border-color: darkblue; border-style: solid; margin-right: 80px; margin-top: 20px; float: right;}

User Contributed Notes
CSS Layout
+ Add a comment
  + View comments

Back to top Credits | Glossary | Help | Navigation | Site Map | Site Search