Your main problem is that you have extra padding and other height-producing code in your stylesheet. You also have a huge amount of redundant or useless properties in there, like the
margin-left: auto;
margin-right: auto;
all over the place. Your stylesheet will be easier to understand and edit if you remove those. Part of your current stylesheet:
Code:
/*wrappers - page or section containers*/
#mainWrapper {
text-align: left;
color: white;
width: 647px;
vertical-align: top;
background-color: #000000;
background-position: 50% 50%;
margin-left: auto;
margin-right: auto;
}
#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
background-color: #000000;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#contentMainWrapper {
margin: 0em;
padding: 0em;
background: url(http://www.evilbrandclothes.com/img/body.jpg);
vertical-align: top;
background-position: top center;
width: 647px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
margin-left: auto;
margin-right: auto;
}
#tagline {
color: #000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}
#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin-left: auto;
margin-right: auto;
width: 47%;
}
.wrapperAttribsOptions {
margin: 0.3em 0em;
}
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin-left: auto;
margin-right: auto;
background-color: ;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 647px;
text-align: center;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
margin-left: auto;
margin-right: auto;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
margin-left: auto;
margin-right: auto;
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
}
#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
}
#navEZPagesTOC ul {
margin-left: auto;
margin-right: auto;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
margin-left: auto;
margin-right: auto;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin-left: auto;
margin-right: auto;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin-left: auto;
margin-right: auto;
}
#navMainSearch {
float: right;
margin-left: auto;
margin-right: auto;
}
#navBreadCrumb {
background-color: #cc9900;
margin-left: auto;
margin-right: auto;
}
#navEZPagesTop {
background-color: #ffff33;
margin-left: auto;
margin-right: auto;
}
#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navColumnOne {
}
#navColumnTwo {
}
Edited to remove superfluous properties with no change in output, except for the noted edits to tighten up spacing:
Code:
/*wrappers - page or section containers*/
#mainWrapper {
text-align: left;
color: white;
width: 647px;
vertical-align: top;
background-color: #000000;
}
#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
text-align: center;
}
#contentMainWrapper {
background: url(http://www.evilbrandclothes.com/img/body.jpg);
vertical-align: top;
background-position: top center;
width: 647px;
text-align: left;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#tagline {
color: #000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}
#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin-left: auto;
margin-right: auto;
width: 47%;
}
.wrapperAttribsOptions {
margin: 0.3em 0em;
}
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
font-weight: bold;
height: 1%;
text-align: center;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
padding: 0em 0em; /*change to tighten up*/
list-style-type: none;
text-align: center;
line-height: 1.0em; /*change to tighten up*/
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}
#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}
#navEZPagesTOC ul {
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
}
#navMainSearch {
float: right;
}
#navBreadCrumb {
background-color: #cc9900;
}
#navEZPagesTop {
background-color: #ffff33;
}
#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navColumnOne {
}
#navColumnTwo {
}