Use the MAIN CONTENT area for text, columns of text, images, graphics…
whatever the main purpose of your site happens to be… it goes here!

This area is the CONTAINERor WRAPPER.

It's a <div> tag that resides within the <body> tags and all other <div> tags belong inside of it.

It contains or wraps all the other div tags together. Think of it as your page boundaries in Illustrator or InDesign. Here I'm allowing it to be seen, but it can be and often is an invisible container. The only reason you're seeing it here is to understand that the other colored <div> tags are inside it AND so you can read this text!

<div> tags are used to create divisons or areas or regions on your page to hold content. Think of them as text boxes or picture boxes in Illustrator or InDesign. Plus they can take on layer positions in the stack and CSS styles.

 

 

The HTML CODE:

<div id="container">
<div id="header">Use the HEADER to place a logo or other branding information. <br>
Add a navigation bar and graphics.
</div>
<div id="mainContent">Use the MAIN CONTENT area for text, columns of text, images, graphics…<br>
whatever the main purpose of your site happens to be… it goes here!
</div>
<p>This area is the CONTAINERor WRAPPER. </p>
<p>It's a &lt;div&gt; tag that resides within the &lt;body&gt; tags and all other &lt;div&gt; tags belong inside of it.</p>
<p>It contains or wraps all the other div tags together. Think of it as your page boundaries in Illustrator or InDesign. Here I'm allowing it to be seen, but it can be and often is an invisible container. The only reason you're seeing it here is to understand that the other colored &lt;div&gt; tags are inside it AND so you can read this text!</p>
<p>&lt;div&gt; tags are used to create divisons or areas or regions on your page to hold content. Think of them as text boxes or picture boxes in Illustrator or InDesign. Plus they can take on layer positions in the stack and CSS styles.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="footer">
<p>This is the FOOTER. <a href="../art227_web_fall13.html">BACK</a></p>
</div>

</div>

 

The CSS STYLES:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {

background-color: #996;
height: auto;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: medium;
color: #FFF;
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
#container2 {

/* [disabled]background-color: #996; */
height: auto;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: medium;
color: #000;
text-align: left;
padding-left: 30px;
padding-right: 30px;
padding-top: 55px;
}
#header {

background-color: #966;
font-size: small;
height: 155px;
padding-right: 20px;
padding-left: 30px;
padding-top: 25px;
}
#mainContent {

background-color: #99C;
height: 400px;
padding-right: 20px;
padding-left: 30px;
font-size: small;
padding-top: 20px;
}
#footer {

background-color: #969;
height: 50px;
padding-right: 20px;
padding-left: 30px;
position: relative;
bottom: 0px;
width: 910px;
padding-top: 15px;
font-size: small;
}
.grayText {

color: #CCC;
}
</style>