The DIV tag
The div tag <div></div> is essentially just a container that we can use to hold other tags on our web page. On its own it doesn't do anything, however, despite this it is one of the most helpful elements that you will ever use, as it allows us to style whole blocks to improve the look and feel of our web page.
Consider the pages that we have been making so far, chances are that (if we're honest) they look pretty horrible and don't really match what we're used to seeing elsewhere on the web. Using div tags we will be able to do something about this and start making our websites look more like real websites.
Our first point of focus in doing this is going to be in improving the layout of our page. Most pages (the one that you're looking at included) have the majority of the content in a large central column, with blank areas to the left and right of this. Let's see how to do this!
Consider the pages that we have been making so far, chances are that (if we're honest) they look pretty horrible and don't really match what we're used to seeing elsewhere on the web. Using div tags we will be able to do something about this and start making our websites look more like real websites.
Our first point of focus in doing this is going to be in improving the layout of our page. Most pages (the one that you're looking at included) have the majority of the content in a large central column, with blank areas to the left and right of this. Let's see how to do this!
Creating a 3 column layout
This part of the lesson has been adapted from the W3Schools website (https://www.w3schools.com/howto/howto_css_three_columns.asp).
First of all, let's take a look at the CSS that we'll be using with the HTML it will be changing. The CSS has been commented to help us understand what each class is doing.
Take a look at both of the images above and read through the break-down below:
1) First of all we have a <div> with our row class. This will create the container that we will put our columns in.
2) Next we have 3 more <div> tags, each with the column class which makes our columns sit next to each other (starting from the left).
3) In addition to the column class we have left, middle, and right. The left and right classes both make that column only take up 15% of the width of the page. The middle class takes up the remaining 70% of the width.
4) All of the content of our website example goes into the middle column.
Note 1: We can put multiple different classes onto an element, like we have above. As long as each class is inside the quotation marks and separated with a space it will be added to the element.
Note 2: Our left and right columns do not have any content so we have just put a placeholder <br/> tag.
Below is an example of the same page with some more paragraphs, as well as the website it will make:
1) First of all we have a <div> with our row class. This will create the container that we will put our columns in.
2) Next we have 3 more <div> tags, each with the column class which makes our columns sit next to each other (starting from the left).
3) In addition to the column class we have left, middle, and right. The left and right classes both make that column only take up 15% of the width of the page. The middle class takes up the remaining 70% of the width.
4) All of the content of our website example goes into the middle column.
Note 1: We can put multiple different classes onto an element, like we have above. As long as each class is inside the quotation marks and separated with a space it will be added to the element.
Note 2: Our left and right columns do not have any content so we have just put a placeholder <br/> tag.
Below is an example of the same page with some more paragraphs, as well as the website it will make:
Task: Convert your train website to use a 3-column layout.
Self-directed challenge
Using your new knowledge of <div> and classes, do your best to follow through this tutorial to make a menu bar for the top of your page.
https://www.w3schools.com/css/css_navbar_horizontal.asp
https://www.w3schools.com/css/css_navbar_horizontal.asp