Div tags (a.k.a Divider Tags) Allow you to define divisions in a web page. They are sized and styled using your Cascading Style Sheets (CSS). This way the HTML or Source Code is left clean and easily read by search engines (Google). Using Div Tag for the layout is an alternative for Tables. Tables can be very heavy on code and Google isn’t a fan of them.
Below is the final structure of this layout
File > New > Blank > HTML > Create
Switch to Design View
Add the Page Title “Vintage Camper Rentals”
File > Save “vintage-homepage.html”
Let’s insert the overall container for the site to sit in
Insert > Div
Give it an ID: container
In your CSS Designer panel choose the + button and choose 'Create a new css file'.
Name the CSS file “vintage.css”
Ok
Click the + button in the 'Selector' panel.
Name your selector #container Note: # indicates an ID. So to style any DIV tags using an ID you must have a # in front of it.
In the properties panel choose a width of 800px
Highlight and delete the copy ‘Content for id “container” Goes Here’ Note: This is just place holder text.
Adding structure to your site Let’s add the div for the Header
Insert > Div
Choose ‘After start of tag’ &
Name it ID: header
Ok
Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
Name your selector #header
Make the width 800px and the height 127px.
Choose a blue for the background colour.
Let’s create the ‘Navigation’ DIV container
Insert > Div
Choose ‘After tag’ &
Name it ID: nav
Ok
Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
Name your selector #nav
Make the width 800px and the height 37px.
Choose a yellow for the background colour.
Let’s create the ‘Text’ DIV container
Insert > Div
Choose ‘After tag’ &
Name it ID: text
Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
Name your selector #text
Make the width 549px and the height 350px.
Choose a pink for the background colour.
Let’s create the ‘image’ DIV container
Insert > Div
Choose ‘After tag’ &
Name it ID: image
Ok
Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
Name your selector #image
Make the width 251px and the height 350px.
Choose a green for the background colour.
Note: The Div tags will naturally try to stack one after each other. To get them aligned correctly we'll need to use a function called 'float'.