Lessons menu
CSS - intermediate - Lesson nr. 8
Positioning content on a website

What is this lesson about?

In this lesson we will arrange the content we created/learned about. They will be positioned relative the page or/and relative to each other.

With the <div> tag we can wrap multiple HTML tags and we can position them together. We can align content horizontally and vertically, moreover we can position it in front of/behind another element. Although <div>-s are not the only elements, that can have background image, we will set background image for the first time in this lesson.


New HTML tag in this lesson:

<div></div> - we can place a section of the webpage’s content in this tag. Using this tag we can position and align contents more easily. Another advantage of <div>-s is, that we can apply separate design settings to a section delimited by it.


New CSS keywords in this lesson:

position – with this property we can set the position of an element on the website. This property can have the following values: static, relative, absolute, fixed, sticky.
top, bottom, left, right – with these keywords we can define the exact position of a positioned  element (all, except static).
z-index – with this property we can set the covering order of the elements positioned over each other. Can be used only with the element being positioned absolute, relative or fixed.
background-image – every HTML element can have a background image. To define the image we need its name and path. The value written in the CSS file has the form: url(path/imagename.extension);



static: this is the default positioning value of the elements on a website. The elements with this positioning are not positioned in any way, they appear according to the flow of the page.
relative: the element is positioned relative to its normal position.
absolute: the element is positioned relative to the nearest parent with a declared position (except static). If no parents are positioned in any way, then it’s relative to the document body.  
fixed: the element is positioned relative to the browser window and it stays in place even on page scroll.
sticky: the element is positioned relative to the scroll position.


Example on sections wrapped in <div>:

The webpage above contains two sections. Both have identifiers (links and back), so we can apply different design to them.

In the links section, thanks to the background colors settings, we can see that the section stretches all the way from left to right in the browser window. The background color for the links is used only for the texts.

We used a background image for the second section. The image is smaller than the section, and there is no setting related to that, so the image will be repeated. The image selected can be repeated, without being visible that it is not one big image (it is called wallpaper). 

The width is not set, the section occupies the whole window from left to right. The height would be adjusted to the content: the word Pattern. That way, there is an 80% height set: this means the 80% of the height of the window.

Both sections contain links, but because the reference to the <a> tag is preceded by the id of the section we can format them differently, without having to use classes.

  • In the newest standard for HTML, there are separate tags for <div> sections used as header or footer, named <header> and <footer>. There is a <nav> tag to mark navigation sections. These tags are useful for the automatized interpretation (by programs) of websites. 
  • Be careful when using background images. The texts will be harder to read, and it is harder to create/find matching background images for different sections, than colors.
  • If we use both color and image as background, the image will be shown. If the image cannot be found or does not fill the whole section, the background color appears.
  • If the background image is smaller than the area to be filled, the image is repeated. If it is bigger, then it will be shown only partially. To change this you may want to read about the background-repeat and the background-size properties.

    Example on fixed positioning:

On the pictures above the positioning of the box1 and box2 sections is the default, static, but the box3 section is fixed. The text Fixed and the box which contains it, will be always in the right top corner of the browser: exactly 30 pixels away from the right and from the top edge of the window. This position does not depend from the size of the window.

The third sections width does not reach through the whole window, its size adjusts to the content.

Example on absolute and relative positioning:

In this example the top and bottom sections (box1 and box3) are static, we use them as referral points, to see how the others are positioned related to their default position.

The section with the green background is positioned relative, transferred with 20 pixels upwards and 100 pixels from left. We can see that the box above it is not disturbed by this shift.

The smaller boxes (box4) position is absolute. It is originally in the green box, but setting the positioning to absolute, we define its location related to the box2: it is 10 pixels up and 100 pixels to the left.

The width of the box2 section stretches to the right edge of the window, the width of the box4 section is adjusted to its content.

The original place of the elements set to relative position is left blank: see the white space between the two static sections.

  • If the position is set to relative, the section can be aligned to center by adding the value auto to the margin property. You may need this setting if the section’s width is not 100%.
  • An element with sticky positioning is always visible in the window, “resisting” scrolling: it is positioned relatively until reaches a marked point trough scrolling, after that the positioning gets fixed. We need to define this position: for example top: 0; means that it will stick at the top of the browser window.

In the example above we can apply the z-index property to the three boxes, because their position is fixed and they overlap. The z-index values here are 0, 1, 2, but can be negative too. We can move elements under not positioned elements.

1. In the index.html file create a new section using a <div> tag. Its id should be header, and its size should be equal to the size of the picture named back.jpg from the images folder. Add this picture as background image to the section, align the header section to the center.

Insert the text Coders Work in h1 tags, then design it as follows: align it to the center of the section, add a light color (color property) and add a font size, bigger the default one (font-size property).

Copy this section to the other HTML files too: it should appear as first content in the browser window.
View the result
2. Insert to the bottom of the index.html page, after the content, a new section as footer. The id to this
tag should be footer. The width of the footer should be 1000 pixels and align it to the center.

Inside this div, insert the following text: Tel: 1234567890
Email: office@coderswork.com

In the CSS file, style the footer div as the followings: give it a 1000 pixel width, align the div to the center, give that div a background image called footer.jpg, from the images footer.jpg, and a 20px padding to top and bottom. Also here, set the text inside it also to the center, color it into white and make it bold with a bigger font size.

Copy this section to the other HTML files too.
View the result
3. Apply to the original content of all the HTML files a new <div> section, with the id named content, which should contain the entire content of the body, except the header and the footer. This way, we will have 3 main div sections in the body: the header, the content and the footer.

Set the width of this section to 1000 pixels and align it to the center.
View the result
4. Put the links (Home, Top, Website making, Tips) from the beginning index.html file in a section with the id menu and place it between the header and the content sections. This section should be always visible on the upper side of the browser window, even if we scroll down on the page.

Its width should be of 1000 pixels, add a background color to it (background-color) and like all other sections of the page it should be centered. Also, copy this menu in the other HTML files too, this way we will be able to navigate on our website from a page to another.
View the result
1. What is the default value of the position property?
2. Which one is a correct background definition?
3. Which one of the following z-index values is the most sure to be visible?
4. We want to position a text into the bottom left corner of the browser window, and its position should not be changed by scrolling. What value should the position property have?
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept