HTML SECTIONS CONTENT (Facebook)

Question

In the web world are these sections call. Review the image below. Can you point me to some good internet resources that have good ideas or customization of the sections in the image.


What would be the best HTML code development to do the sections below. Here is my first attempt below. Let me see your style of how you would develop this also.

CSS:

li 

{

display: list-item;

text-align: -webkit-match-parent;

list-style:none;

}

HTML:

<!-- Section: userContentSectionWrapper -->

<div class="userContentSectionWrapper"  style="float:right;width:380px;height:300px; background-color:#FFFFFF; border: #F4F4F4 solid 1px;">

<ol class="" style="list-style:none; margin:0; padding:0;">

<li class="" >

        <div class="userContentSectionTopBorder" style="height:4px;z-index:0;background-color:red;" > </div> <!-- end userContentSectionTopBorder --> 

          

           <div class="userContentSectionContainer" style="" >  

     <div class="" >

   

    <div role="article" >  

  <div class="userContentSectionContainerHeader" style="width:380px;height:50px;background-color:blue;margin:0;padding:0;border-bottom: 4px solid #FF0000;">  

 

            </div> <!-- end userContentSectionContainerHeader -->

 

<div class="userContentSectionContainerReport" >  

                   <div class=""> 

     <div role="article" >  

      <ul>

      <li></li>

  </ul>

 </div>

</div>

 

            </div> <!-- end userContentSectionContainerReport -->

              </div> <!-- end article -->

 

           </div> <!-- end class -->

 

         </div> <!-- end userContentSectionContainer -->

<div class="userContentSectionBottomBorder" style="" > </div> <!-- end userContentSectionBottomBorder --> 

         

</li>

</ol>

</div> <!-- end userContentSectionWrapper -->