This screenshot shows general overview of the elements inside of div#mainwrapper (little more overview of div#headerwrapper, div#navSuppWrapper, and

div#siteinfoLegal(.legalCopyright)
screenshot showing general 3 columns -- created by table cells called #navcolumnone and .columnLeft, second td doesn’t have an id of class but inside that cell
we can see a div that has an id indexproductList and class centercolumn, third td is #navcolumnTwo and .columnRight
This screenshot has little more detail of the elements
within each td cells
This screenshot just focus on the first td
cells so you can see the details of the
elements like

td

-> div#navcolumnOneWrapper
-----> div#categories(.leftBoxContainers)
-------->h3#categoriesHeading
(.leftBoxHeading)
-------->div#categoriesContent
(.sideBoxContent)
-------------->a.category-top
This screenshot focus on the rightmost column created by
third td cell

td#navcolumnTwo(.columnright)
--->div#navcolumnTwoWrapper
--------->div#specials (.rightBoxContainer)
--------------->h3#specialsHeading(.rightBoxHeading)
--------------->div(.sideBoxContent .centeredContent)
::Note: the above div will show depending on the maximum
number of products chosen set through admin console
--------->div#moreInformation (.rightBoxContainer)
--------------->h3# moreInformationHeading(.rightBoxHeading)
--------------->div#moreInformationContent (.sideBoxContent )
--------------------->ul
------------------------->li (several li’s)
--------->div#manufacturers (.rightBoxContainer)
--------------->h3# manufacturersHeading(.rightBoxHeading)
--------------->div# manufacturersContent
(.sideBoxContent .centeredContent )
--------------------->form
------------------------->input
------------------------->select
 Main Index page- screenshot of
middlecolumn
This screenshot is to show the middle column td
cell where the div#indexDefault (.centerColumn)
surrounds all the elements in the middle
column---->td
---->div#indexDefault (.centerColumn)
-------->h1#indexDefultHeading
-------->h2#greeting
-------->div#indexDefaultMainContent (.content)
-------------->p (3 paragraphs shown)
-------->div#whatsNew (.centerBoxWrapper)
-------------->h2.centerBoxHeading
-------------->div(.centeBoxContentNew
centeredContent back)
Note: the above div will appear depending on the
maximum number of products to show in center
column boxes
-------->div#featuredProduct (.centerBoxWrapper)
-------------->h2.centerBoxHeading
-------------->div(.centeBoxContentFeatured
centeredContent back)
Note: the above div will appear depending on the
maximum number of products to show in center
column boxes
-------->div#specialDefault (.centerBoxWrapper)
-------------->h2.centerBoxHeading
-------------->div(.centeBoxContentSpecials
centeredContent back)
Note: the above div will appear depending on the
maximum number of products to show in center
column boxes
Product Listing Screenshot shows detail
of middle column