Introduction to CSS Layouts

A simple CSS layout

A simple CSS layout

We are going to make a very simple layout using boxes called divs. We are going to create a header with an h1 in it, a content area image, and a footer, all contained in a div with the ID of wrapper.

This type of layout is used for simple sites. If you need content that extends across the width of the browser, this site may not work well for you. For more complicated sites, you will need to use the pancake method. We will learn more about that later.

The invisible <div>

The div is the HTML element that is the building block for modern web design. You will learn later how HTML5 will change this, but until that is the accepted method, it is best to use divs.

Let’s create a simple layout and work on improving it over the course of the lesson.

Copy and paste this code into a new document, nested between the body tags.

<div>
 <div><h1>Welcome to my website</h1></div>
 <div>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
 <p>content</p>
</div>
<div><p>Creative Commons 2012, your awesome name</p></div>
</div>

Identification

Before we can apply styles, we need to identify where the styles are going to be placed. Starting by identifying the areas in our introductory site, let’s give the ID attribute to the div that surrounds the rest of the site. We’ll call this div “wrapper“, the div with the header in it “head“, the next one “content” and finally the last one is called “footer“.

Save the page and render it in the browser. With nothing exciting to look at, it’s time to add the CSS styles. We will be using the following new properties today:

Shape properties

padding

Padding sets the amount of space on the inside of an element.

Padding can use any real number (px, cm, in, %, ect.) and is a short cut for padding-left, padding-right, padding-top and padding-bottom which are all separate properties I can add to a selector.

Every object has 4 sides: top right bottom and left>

If I set .example { padding: 10px;} the object will have the same padding on all 4 sides. Setting the padding to .example { padding: 10px 5px;} sets the top and bottom to 10px and the left and right to 5px. Setting the padding to.example { padding: 10px 5px 7px 4px;} sets the top to 10px, the right to 5px, the bottom to 7p and the left to 4px.

The order in the padding shortcut if there are 2 values is [top & bottom] [left & right]

The order in the padding shortcut if there are 4 values is [top] [right] [bottom] [left]

margin

Margin sets the amount of space on the outside of an element.

.example { margin: 10px auto;}

Margin is also a shortcut for margin-top, margin-right, margin-bottom and margin-left.

If I set .example { margin: 10px;} the object will have the same margin on all 4 sides. Setting the margin to .example { margin: 10px 5px;} sets the top and bottom to 10px and the left and right to 5px. Setting the margin to .example { margin: 10px 5px 7px 4px;} sets the top to 10px, the right to 5px, the bottom to 7p and the left to 4px.

The order in the margin shortcut if there are 2 values is [top & bottom] [left & right]

The order in the margin shortcut if there are 4 values is [top] [right] [bottom] [left]

width

Width sets the amount of space the entire object takes up, not including the padding and margin!

.example { width: 300px;}

overflow

Overflow is magic. Typically it sets the element that contains something to allow that containing content to expand beyond the border, hide what is outside of the border, or add scroll bars. If I had a div that was 200px by 200px and I had information in it that expanded beyond that containing element, I would use overflow to tell it how that extra content should be handled.  Here is an article explaining how overflow is used in a typical situation. For overflow to work the way you expect it to, you need to set the height: and width: properties with a real number value.

.example { overflow: hidden;}

How I use overflow in this example is a hack of sorts. When I use overflow:hidden on a containing element, I expect the background colours and margins of the nested elements to expand to their full size. By setting overflow on an element, I am resetting the block formatting context This took me a while to get used to. To explain how this works, this article explains the magic of overflow much better than any one can. Be aware that this may just leave you with more questions than answers.

What you need to know to start using it in practical work is that overflow:hidden is used on the wrappers and containers – the divs that do nothing but hold other divs generally.

The layout

There isn’t a lot that goes into making a simple layout. We need to define the styles and attach the selectors to the areas we previously defined.

body

CSS Layout Background

CSS Layout Background

Our body needs a background colour and image. Download the image at the right and place it in your practice folder. Save it as cssbackground.jpg.

We are going to create a image that sits aligned in the centre of the page, a colour that surrounds the image. We’ll use the background property.

Let’s define the body tag in our site.

body { background:#161635 url(cssbackground.jpg) no-repeat fixed center top;margin: 0; padding: 0;}

We’re using the background shortcut CSS property here. This is quite common. The margin and padding clear the default padding that all body tags come with.

#wrapper

The wrapper is the container for the content elements: header, content and footer. The wrapper is used to constrain the width of the site, and (in this particular case) make sure that it floats in the middle of the page. Let’s take a look at all that is involved in the wrapper.

#wrapper { margin: 0 auto; padding: 0; width: 560px; background: #FFF; overflow: hidden;}

#wrapper div {margin: 10px; padding: 5px;}

Box model from firebug's layout tab

Box model from firebug’s layout tab

The #wrapper div sets all divs that are inside of wrapper to have a width of 530px, in addition to a 10px margin and a 5px padding. let’s add up the values of the box model and see how they stack up:

10px   +   0px   +   5px   +   530px   +   5px   +   0px   +   10px   =   560px

These values represent all the values stacked on to an element at one time. Our margin all around the element is 10px, our padding all around the element  is 5px and the width of the element is 530px. We don’t have a border – that is represented by the 0px.

#head

The #head do nothing more than give the text and background some colour.

#head{ background: #59af50;}

#head h1 { margin: 0; padding: 0; color: #FFF;}

 

#content

Here we colour the background.

#content{ background: #dadada;}

#footer

The #footer do nothing more than give the text and background some colour.

#footer{ background: #999; color: #FFF;}

The finished product

Here is the finished layout.

Resources

3 Responses to “Introduction to CSS Layouts”

  1. Kim Reid says:

    Still not sure how to get address from site.

Search