Taking what we learned from the last two entries, I am going to show you something I used in real life blog design.

With the latest blog redo on my other blog, I wanted the same color background, opacity (see through-ness) and a border around all of the side bar and not just each section.  Then I wanted some space in between the sections of my side bar.  So I created two div tags in my CSS file.  See below:

#all-side
{
   background-image: url();
   background-repeat: repeat-y;
   margin-top: 223px;
   margin-left: 10px;
   padding-left: 10px;
   background-color: #ffffff;
   border: 1px solid black;
    /* CSS3 standard */
   opacity:0.6;
   /* for Mozilla */
   -moz-opacity:0.6;
   filter:alpha(opacity=65);
   width:100%; 
   height:100%;
}

#side-section
   {
   margin-left: 15px;
   margin-top: 10px;
   text-align: left;
   padding-bottom: 5px;
   font: 12px arial;     
   }

In my main file, at the beginning of the code for my side section I put <div id="all-side">, then at the bottom of the whole side section, I put </div>.

Then I decided what areas I wanted to group together and put <div id="side-section"> at the beginning of the section, then </div> at the end of each section.  So the main file looks something like this:

<div id="all-side">
<div id="side-section>

(picture and link to Support Soldiers Angels)
(longhorn picture code)
(code for countdown to football season)
(links to my football posts)
(links to my bio)
(links to this site)
(links to email me)

</div> (This ends the first section)

<div id="side-section>

(blog roll code)

</div> (This ends the blog roll section)

</div>  (This ends the whole side bar - div tag "all-side")

 

   Now it is your turn to try it.  Add two div section to your main CSS file and make a mini section on your sidebar.  Put a border around it all and add two sections with changes in the section code. 

Up next:  My Template Modification Methology

Table of Contents for the Blog Design series is here.