CSS Positioning

At National 5 we were happy for you to place your content vertically one after the other. At Higher we will be expecting you to place content side by side using CSS rules.

But before this you will have to gain a further understanding of the sizes of elements using the box model.

You have to consider the different sizes that a browser window can be displayed at. You can set the height and width of elements as fixed  sizes by :

• body {width: 800px;}

• header {height: 80px;}

• footer {height: 60px;}

• nav {height: 30px;}

Or relative percentages of their container elements - creating what can be known as a fluid layout.

• div {width: 50%}

Elements can be classed as an inline or block element. A block element can be defined as elements of the document that are formatted visually as blocks (e.g. paragraphs). They will take up the entire width of its container e.g. the DIV or other container that it is contained in or the page etc.

An inline element can be defined as those elements of the document that do not form new blocks of content, the content is distributed in lines. They will take up width of the content.

Some different block and inline elements are detailed below:

The image below demonstrates the difference between putting 4 block elements immediately after one another or 4 inline elements immediately after one another.

Paragraphs and headings are examples of block elements. You will notice that it has taken up the entire width of the container that it is in.

• For demonstration we have used the universal selector  * { } to show ALL borders within the page so that we can see the borders of every element.

Heading borders are in black and the paragraph borders are in red.

If we add an image after the heading 1 element and before the text you will notice that it is placed on the line after Heading 1 and before Paragraph 1 as an image is an example of an inline element ( more on these in the next section). The image border has been set to green for display purposes.

The margin is the area outside of the element and by default is set to 0. When setting the margin you can specify the margin on all 4 sides of an element by using the margin property such as:

• h2 {margin: 10px} 

Shorthand Notation 

You can specify the margin for all 4 margins by listing the margin-top, margin-right, margin-bottom and margin-left properties as shown below:

• h2 {margin: 10px 10px 5px 15px;} 

The top, bottom, left and right margin settings can be set individually using:

• margin-top

• margin-right

• margin-bottom

• margin-left

In this example the CSS rule below sets the margin at the top of each element to 5 pixels. The colour of the body has been set to a pale blue where as the element colours are white/grey.

header, nav, main, footer {margin-top:5px}

The {margin: auto;} rule can be used to position an element in the centre of a browser window or within its container element.

So the CSS rule below would style the body element to always be in the middle of a browser window (as it will not be in any other container).

body{

margin: auto;

}

There will be occasions when you want to centre align an image or other inline element. To do this not only do you have to display the image as a block element (as an image is an inline element) but you will have to set the margin property to auto;

Similar to margins, the padding property can be defined for any of the 4 sides of an element or to all 4 sides.

• h2 {padding: 10px}

Or you can specify the top, bottom, left and right padding settings individually:

• padding-top

• padding-bottom

• padding-left

• padding-right

You will see that inside the two div elements the content is up at the very top left corner.

header, div, main, footer, section {padding:0px}

With 10 pixels of padding you will see that there is a 10 pixel space between the outside bounds of the two container elements.