Container div tag exercise

A container div tag sits inside the body tags and allows you to size and center your entire site within a browser window.

The visible sizing of a website in a browser window is also called it's "viewport". Websites are often coded so that their viewports change and are optimised for different device screen sizes and shapes, such as desktop screens and mobile phones.

 

1. Add this tag inside the <body> tags of each of your websites html pages ..

<body>

<div id="container">

(all other tags go here, including nested <div> tags such as .. <#nav, #masthead, #content etc)

</div><!--container ends here-->

</body>

 

 

2. Add this style to your CSS stylesheet ..

#container {
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 700px;
position: relative;
background-color: #FF9966; (you can choose your own colour)
}