<span> inside <div> styling issues.

Html Code:

<div id="content">
<!-- navigation bar code, not needed for my question :)-->

<div id="main"><img src="images/C7-1_services.png" width="188" height="30" alt=""/>
        	<div id="main_text">
            
            <span class="outline1"><span class="style5">web design. </span><br />
        	  <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
       	  
          <span class="outline1"><span class="style5">graphic design.</span><br />    
               <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
               
               <span class="outline1"><span class="style5">search engine optimization.</span><br />
               <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
               
               <span class="outline1"><span class="style4"><a href="contact.htm">Contact</a> us for a free quote today!</span></span>                
<br />
   	  </div>
      </div>
  </div>

HTML:

CSS Code: (Just what you need to see)

div#content {
background:url(inherit);
width:800px;
}

div#main {
background-image:url(images/final-2_11.png);
background-repeat:no-repeat;
background-position:top left;
width:549px;
height:325px;
float:right;
text-align:left;
}

div#main_text {
background:url(inherit);
padding-left:15px;
overflow: auto;
height:250px;
text-align:left;
}

.style4 {
color: #d6d6d6;
font-family: Arial;
font-size: 12px;
}

.style5 {
color: #FFFFFF;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
}

.outline1 {
outline: solid;
outline: medium;
outline:#CCCCCC;
padding: 5px;
}

Code (markup):

Now my question is...around each section such as "Web Design" and then "Loreum..." I want a border around each section. This is all dummy text, so bare with me. But around each section i wanted the ".outline1" rule to come in to outline each section into its own box. Something along the way is conflicting, and the box isn't showing up. I know my code is a mess.

Any tips or solutions!!!???

 

Yeah your right the code is a mess I all those spans aren't the best way to go about doing things try using different markup such as <p> tags. anyway here is a fix to make your borders show up.

.outline1 {
border: solid medium #CCCCCC;
padding: 5px;
}

that will make them show up.

 

Thanks, how should I tidy it up?

P = outline 1
span = 5> title </span
span = 4> textttttt </span
/P

repeat.

The above is obviously not real code, just example.