It has been awhile, but I am back with the next entry in the Blog Design series. 

The next step to understand a div is to think of it as a wedding invatation.  First you have the main envelope with who you are sending it to.  Then inside that you have another envelope to hold both the RSVP card and the actual invitation.  You can do the same thing with divs. 

First you put all your divs in your css file, like so:

#AddressingEnvelope
{
border: medium dashed blue;
padding: 3px;
text-align: center;
}

#MainEnvelope
{
border: medium solid red;
padding: 25px;
text-align: left;
}

#RSVP
{
border: medium dotted green;
padding: 2px;
text-align: left;
font-size: 50%;
}

#Invite
{
border: thick dashed black;
padding: 2px;
text-align: right;
font-size: 50%;
}

Next we add the divs to our main page.

<div id=AddressingEnvelope>
This is the addressing envelope.  It holds everything on the example.

<div id=MainEnvelope>
This is the main envelope.  It holds just the RSVP and actual invite.

<div id=RSVP>
This is the RSVP.
</div> (This ends the RSVP settings.)

<div id=Invite>
This is the Invite.
</div> (this ends the invite settings.)

</div> (this ends the Main Envelope settings.)

</div> (this ends the Addressing Envelope settings.)

 So now look over to my side bar for the section labeled Multive DIV.  Notice the border and how they work?  How the "Addressing Envelope" border is around everything?  Notice the text alignment changes? 

So that is a very simple example of how you can use multiple divs.  My next entry I will give examples that can be used on your live blog.

Table of Contents for the Blog Design series is here.