No replies
allanmiller
allanmiller's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Timezone: GMT-7
Joined: 2012-03-13
Posts: 1
Points: 2

I'm working with an existing shopping cart template - their html, their css - and I'm trying to make it work for our application. I'm running out of time and hoping you can help.

The problem I have is trying to get nested side navigation divs to extend to 100% height to extend to the footer of the page. I've read other posts on this and I tried to follow the advice given, but it's still not working and I don't know what to do.

I've included the CSS and the layout page below. It's the .Left and .Right that I'm trying to get to extend to the .Footer. Right now .Left and .Right stop where their content ends.

LAYOUT...

HTML and CSS Syntax (Toggle Plain Text)
 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    %%Panel.HTMLHead%%
 
    <body>
    <div id="Container">
    %%Panel.Header%%
    <div id="Wrapper">
    <div class="Left" id="LayoutColumn1">
    %%Panel.SideCategoryList%%
    %%Panel.SidePopularVendors%%
    %%Panel.SideShopByBrand%%
    %%Panel.SideNewsletterBox%%
    %%Panel.SideLiveChatServices%%
    </div>
    <div class="Content" id="LayoutColumn2">
    %%Discount.FreeShippingEligibility%%
    %%Banner.TopBanner%%
    %%Panel.HomeFeaturedProducts%%
    %%Panel.HomeNewProducts%%
    %%Panel.HomeRecentBlogs%%
    %%Banner.BottomBanner%%
    </div>
    <div class="Right" id="LayoutColumn3">
    %%Panel.SideCartContents%%
    %%Panel.SideTopSellers%%
    %%Panel.SideNewProducts%%
    %%Panel.SidePopularProducts%%
    </div>
    <br class="Clear" />
    </div>
    <br class="Clear" />
    <div id="Footer">
    <p>
    %%GLOBAL_AllPricesAreInCurrency%%
    Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%%.
    %%SNIPPET_SitemapLink%%
    %%GLOBAL_MobileSiteLink%%
    %%GLOBAL_PoweredBy%%
    </p>
    %%GLOBAL_DebugDetails%%
    </div>
    <br class="Clear" />
    </div>
 
    %%GLOBAL_DesignModeHTML%%
    %%GLOBAL_QueryList%%
    %%GLOBAL_DesignModeScriptTag%%
    %%GLOBAL_LiveChatFooterCode%%
 
    %%GLOBAL_OptimizerTrackingScript%%
    %%GLOBAL_OptimizerConversionScript%%
    %%GLOBAL_OptimizerSetCookieScript%%
 
    %%GLOBAL_FooterScripts%%
    %%SNIPPET_FastCartThickBoxJs%%
    </div>
    </body>
    </html>

CSS...

    /* Global Reset */
    * {
    margin: 0;
    padding: 0;
    }
 
 
    /* General */
 
    /* html, body {height: 100%;}*/ /* tried this and it did not work, reverted to body only below */
 
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    height: 100%;
    }
    input, select {
    font-size: 11px;
    }
    input {
    padding: 1px;
    }
    p {
    line-height: 1.3;
    margin-bottom: 15px;
    }
    a {
    text-decoration: underline;
    }
    h2, .TitleHeading {
    font-size: 2.2em;
    margin: 6px 0 6px 0;
    }
    h3 {
    font-size: 1.4em;
    font-weight: normal;
    margin-bottom: 6px;
    }
    h4 {
    font-size: 1.1em;
    margin-bottom: 4px;
    }
    img, img a {
    border: 0;
    }
    ul, ol {
    margin: 0 0 10px 30px;
    }
    li {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    }
    blockquote {
    margin-left: 28px;
    }
    select option {
    padding: 0 10px;
    }
    hr {
    margin: 10px 0;
    padding: 0;
    height: 1px;
    border:0;
    }
 
 
    /* Forms */
    .HorizontalFormContainer dl, .VerticalFormContainer dl {
    margin: 0;
    }
    .HorizontalFormContainer dt img {
    vertical-align: middle;
    float: left;
    }
 
    .HorizontalFormContainer dt .fieldLabel {
    float:left;
    padding-top: 4px;
    padding-left: 4px;
    }
 
    .HorizontalFormContainer dt {
    width: 160px;
    float: left;
    clear: left;
    }
    .HorizontalFormContainer dd.ProductField {
    height: 20px;
    }
 
    .HorizontalFormContainer dd {
    padding-top:4px;
    margin-left: 170px;
    }
    .NarrowFormContainer dt {
    width: 110px;
    }
    .NarrowFormContainer dd {
    margin-left: 120px;
    }
    .HorizontalFormContainer p.Submit {
    margin-left: 170px;
    }
    .NarrowFormContainer p.Submit {
    margin-left: 120px;
    }
    .VerticalFormContainer dt {
    margin-bottom: 6px;
    }
    .VerticalFormContainer dd {
    margin-bottom: 6px;
    margin-left: 10px;
    }
 
 
    /* Page Container */
    #Container {
    width: 958px;
    margin: 0 auto;
    background-color: #B7E2FF;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #999999;
    height: 100%;
    }
 
 
    /* Main Navigation Menu */
 
    #mainNav {
    clear: both;
    margin: 0;
    padding: 0;
    height: 39px;
    }
 
    /*sub navigation menu */
    #subNav {
    clear: both;
    margin: 0;
    padding: 0;
    height: 30px;
    }
 
    /* Outer Content Wrapper (Surrounds header & content) */
    #Outer {
    clear: both;
    }
    #Wrapper {
    clear: both;
    height: 100%;
    }
 
 
    /* Header */
    #Header {
    clear: both;
    width: 958px;
    height: 79px;
    background: #fff url(../../__custom/images/vitafit/header-bg.png) repeat-x;
    }
    #headerNav {
    height: 27px;
    width: 488px;
    float: right;
    }
 
    /*New Logo */
    #newLogo {
    height: 79px;
    width: 272px;
    float: left;
    }
 
    /* Top Search Form */
    #SearchForm {
    float: right;
    width: 295px;
    padding: 0;
    margin: 14px 10px 0 0;
    display: inline;
    }
    #SearchForm form {
    }
    #SearchForm label {
    display: none;
    }
    #SearchForm input.Textbox {
    width: 214px;
    font-size: 0.9em;
    padding: 2px;
    }
    #SearchForm .Button {
    width: 69px;
    height: 23px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    }
    #SearchForm p {
    margin: 0px 0px 0px 30px;
    font-size: 0.85em;
    }
    #SearchForm a {
    text-decoration: none;
    }
    #SearchForm a:hover {
    text-decoration: underline;
    }
 
    /* Slider Banner */
    #slider {
    width: 798px;
    height: 341px;
    clear: left;
    background-color: #CCCC66;
    float: left;
    }
 
    #homeOptinBox {
    float: right;
    width: 160px;
    font-size: 0.85em;
    padding-bottom: 10px;
    background-color: #999966;
    height: 434px;
    }
 
 
    /* Left Content Area */
    .Left {
    float: left;
    width: 160px;
    font-size: 0.85em;
    margin-right: 10px;
    height: 100%;
    background-color: #FFFF66;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #999999;
    }
    .Left Block {
    }
    .Left .BlockContent {
    padding: 10px 5px 15px 5px;
    }
    .Left h2 {
    font-size: 1.3em;
    padding: 8px 5px 8px 5px;
    margin: 0;
    width: 148px;
    }
    .Left ul {
    margin: 0;
    padding: 0;
    }
    .Left li {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 3px 0;
    }
    .Left li a {
    text-decoration: none;
    }
    .Left li a:hover {
    text-decoration: underline;
    }
    .Left #SideCategoryList li ul {
    }
    .Left #SideCategoryList li.LastChild {
    border-bottom: 0 !important;
    }
    .Left #SideCategoryList li{
    padding: 2px 0 1px 0;
    }
    .Left #SideCategoryList li ul {
    padding-left: 8px;
    }
 
 
    /* Primary Content Area */
    .Content {
    float: left;
    width: 618px;
    /* min-height: 500px; */
    margin: 0;
    padding: 0 0 10px 0;
    height: 100%;
    }
    .Content .Block {
    clear: both;
    }
    .Block {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .Content h2, .TitleHeading {
    margin: 10px 0;
    }
    .Content a:hover {
    text-decoration: underline;
    }
 
    /* Primary Content Area (column span of 2) */
    .Content.Wide {
    width: 778px;
    }
    /* Primary Content Area (column span of 3 - spans entire page width) */
    .Content.Widest {
    width: 958px;
    margin-left: 10px;
    display: inline;
    }
 
 
    /* Right Content Area */
    .Right {
    float: right;
    width: 160px;
    font-size: 0.85em;
    padding-bottom: 10px;
    height: 100%;
    background-color:#FFCC00;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #999999;
    }
    .Right .Block {
    }
    .Right .BlockContent {
    padding: 10px 5px 15px 5px;
    }
    .Right h2 {
    font-size: 1.3em;
    padding: 8px 5px 8px 5px;
    margin: 0;
    width: 148px;
    }
    .Right ul {
    margin: 0;
    padding: 0;
    }
    .Right li {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 3px 0;
    }
    .Right li a {
    text-decoration: none;
    }
    .Right li a:hover {
    text-decoration: underline;
    }
 
 
    /* Page Footer */
    #Footer {
    clear: both;
    width: 958px;
    font-size: 0.85em;
    text-align: center;
    margin: 30px 0 0 0;
    padding: 30px 0 20px 0;
    }
    #Footer ul {
    list-style: none;
    margin: 0 0 30px 115px;
    padding: 0;
    }
    #Footer li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #Footer li a {
    text-decoration: none;
    padding: 0 10px 0 10px;
    }
 
 
    /* Newsletter Subscription Form */
    .NewsletterSubscription {
    clear: both;
    }
    .NewsletterSubscription label {
    clear: both;
    float: left;
    }
    .NewsletterSubscription input {
    width: 129px;
    font-size: 0.9em;
    padding: 3px;
    margin-bottom: 5px;
    }
    .NewsletterSubscription .Button {
    width: 90px;
    height: 20px;
    border: 0;
    padding: 0;
    margin-top: 6px;
    vertical-align: middle;
    background: transparent;
    }
 
 
    /* Product Listings */
    .ProductList {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .Content .ProductList li {
    min-height: 12em;
    float: left;
    width: 299px !important;
    margin: 4px 4px 8px 4px;
    padding: 0;
    overflow: hidden;
    display: inline;
    }
    .Content .ProductList .ProductImage {
    float: left;
    width: 120px !important;
    height: 120px !important;
    text-align: center;
    padding: 15px 15px 5px 15px;
    margin: 0 0 5px 0;
    }
 
    .ProductList .ProductImage img {
    max-height:120px;
    max-width:120px;
    }
 
    .Content .ProductList .ProductDetails {
    padding: 10px 5px 0 0;
    margin: 0 0 5px 0;
    }
    .ProductList p {
    margin: 5px 0 5px 5px;
    }
    .ProductList a {
    text-decoration: none;
    }
    .ProductList strong, .ProductList strong a {
    }
    .ProductPrice, .ProductList em {
    font-style: normal;
    font-weight: bold;
    }
    .ProductList .Rating {
    font-size: 0.9em;
    font-weight: bold;
    }
    .ProductList li .ProductCompareButton {
    margin-top: 3px;
    }
    .Left .ProductList .ProductImage, .Right .ProductList .ProductImage {
    display: none;
    }
    .Left .ProductList li, .Right .ProductList li {
    clear: both;
    width: 145px;
    list-style: none;
    margin: 0;
    margin-top: 5px;
    padding: 3px 0 5px 0;
    }
 
 
    /* Top Seller Block Specific */
    .Left .TopSellers li .TopSellerNumber, .Right .TopSellers li .TopSellerNumber { /* Contains the number of the item */
    float: left;
    width: 18px;
    font-size: 2em;
    }
    .Left .TopSellers .ProductDetails, .Right .TopSellers .ProductDetails { /* Contains the details of the item */
    margin-left: 25px;
    padding: 3px 0 3px 0;
    }
    .Left .TopSellers li.TopSeller1, .Right .TopSellers li.TopSeller1 { /* No1 seller box */
    clear: both;
    float: left;
    width: 145px;
    margin: 0 0 5px 0;
    overflow: visible;
    display: inline;
    }
    .Left .TopSellers li.TopSeller1 img, .Right .TopSellers li.TopSeller1 img {
    text-align: center;
    overflow: hidden;
    }
 
    .Left .TopSellers li.TopSeller1 img, .Right .TopSellers li.TopSeller1 .ProductImage img {
    width: 130px !important;
    }
 
    .Left .TopSellers li.TopSeller1 .TopSellerNumber, .Right .TopSellers li.TopSeller1 .TopSellerNumber {
    display: none;
    }
    .Left .TopSellers li.TopSeller1 .ProductDetails, .Right .TopSellers li.TopSeller1 .ProductDetails {
    clear: both;
    }
    .Left .TopSellers li.TopSeller1 .ProductImage, .Right .TopSellers li.TopSeller1 .ProductImage {
    width: 130px;
    display: inline;
    text-align: center;
    overflow: hidden;
    padding: 0;
    margin: 0 0 0 5px;
    }
 
    .Content .TopSellers li .TopSellerNumber {
    display: none;
    }
 
 
    /* Page Breadcrumbs */
    .Breadcrumb ul, .Breadcrumb li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .Breadcrumb {
    font-size: 0.9em;
    padding-bottom: 4px;
    }
    .Breadcrumb li {
    padding-left: 6px;
    display: inline;
    }
    .Breadcrumb li a {
    padding-right: 10px;
    background: url('../../Bargains/images/BreadcrumbSep.gif') no-repeat right;
    }
    .FindByCategory ul, .FindByCategory li {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .FindByCategory li {
    padding-left: 12px;
    background: url('../../Bargains/images/BreadcrumbSep.gif') no-repeat 3px 5px;
    padding-right: 8px;
    display: inline;
    }
 
 
    /* Miscellaneous Definitions */
 
    .Meta {
    font-size: 0.93em;
    }
    .Left .FeedLink, .Right .FeedLink {
    float: left;
    margin: 2px 5px 0 0;
    }
    .Content .FeedLink {
    float: left;
    margin: 8px 10px 0 0;
    }
    .FloatRight {
    float: right;
    }
    .FloatLeft {
    float: left;
    }
    .ClearRight {
    clear: right;
    }
    .ClearLeft {
    clear: left;
    }
    .SortBox {
    font-size: 0.95em;
    }
    .CompareButton {
    clear: both;
    text-align: right;
    margin-top: 12px;
    padding: 4px;
    }
    .Clear {
    clear: both;
    }
    .Field45 {
    width: 45px;
    }
    .Field100 {
    width: 100px;
    }
    .Field150 {
    width: 150px;
    }
    .Field200 {
    width: 200px;
    }
    .Field250 {
    width: 250px;
    }
    .Field300 {
    width: 300px;
    }
    .Field350 {
    width: 350px;
    }
    .Field400 {
    width: 400px;
    }
    .MB10 { margin-bottom:10px; }
    .MT0 { margin-top:0px; }
    .LH140 { line-height:140%; }
    .PLRB5 { padding:0px 5px 5px 5px; }
    .PLR10 { padding:0px 10px 0px 10px; }
    .PL20 { padding:0px 0px 0px 20px; }
    .PL40 { padding:0px 0px 0px 40px; }
    .ML20 { margin:0px 0px 0px 20px; }
    .MT10 { margin-top:10px; }
    .PL10 { padding-left:10px; }
    .PB2 { padding-bottom:2px; }
    .NoMarginBottom { margin-bottom: 0; }
 
    .Required {
    font-weight: bold;
    visibility: visible;
    }
 
    .InfoMessage {
    padding: 8px 6px 8px 28px;
    margin-bottom: 10px;
    }
    .SuccessMessage {
    padding: 8px 6px 8px 28px;
    margin-bottom: 10px;
 
    }
    .ErrorMessage {
    padding: 8px 6px 8px 28px;
    margin-bottom: 10px;
    }
 
 
    /************* Page Specific: Create Account / Login Page *************/
    .CreateAccount {
    float: left;
    width: 335px;
    padding-right: 20px;
    }
    .AccountLogin {
    float: left;
    padding-left: 20px;
    width: 335px;
    }
    ul.ShippingAddressList, ul.ShippingAddressList li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul.ShippingAddressList li {
    width: 30%;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
    }
 
 
    .PrimaryProductDetails .ProductThumb {
    float: left;
    width: 180px;
    text-align: center;
    padding: 10px 0 0 0;
    margin: 0 15px 0 0;
    }
    .PrimaryProductDetails .ProductMain {
    width: 360px;
    float: left;
    }
    .PrimaryProductDetails dl {
    font-size: 0.90em;
    }
    .PrimaryProductDetails dt {
    font-weight: bold;
    width: 80px;
    clear: left;
    }
    .PrimaryProductDetails dd {
    margin-left: 90px;
    }
 
 
    .Right hr {
    margin: 5px 0 0;
    }
 
    .Content h3 {
    margin-bottom: 5px;
    }
 
    .ComparisonCheckbox {
    float: left;
    }
 
 
    .SideRecentlyViewed .CompareButton {
    margin: 10px 0 0 0;
    padding: 0;
    }
    .SideRecentlyViewed .ProductList li {
    margin-left: 0;
    }
    .SideRecentlyViewed .ProductDetails {
    margin-left: 20px;
    }
 
    /* Product Comparisons */
    .ComparisonTable { width: 100%; }
    .ComparisonTable td { vertical-align:top; font-size: 11px }
    .CompareFieldName { width:95px; padding:8px 10px 8px 15px; }
    .CompareFieldTop { padding:5px; text-align:center; }
    .CompareFieldTop a { text-decoration:none; font-size:10px; }
    .CompareFieldTop a:hover { text-decoration:underline; }
    .CompareLeft { padding:5px 10px 5px 10px; }
    .CompareCenter { text-align:center; padding:5px; }
    .CompareRating { text-align:center; padding-top:8px; vertical-align:middle; }
    .CompareProductOption { margin-left:20px; padding-left:5px; }
 
    .Availability { }
    .LittleNote { font-size: 0.85em; }
 
    .ViewCartLink {
    padding-left: 30px;
    padding-top: 4px;
    padding-bottom: 8px;
    }
 
    /* General Tables */
    table.General,
    table.CartContents, table.General {
    width: 100%;
    margin: 10px 0;
    }
    table.General thead tr th,
    table.CartContents thead tr th {
    padding: 6px 10px;
    text-align: left;
    }
    table.General tbody td,
    table.CartContents tbody td {
    padding: 6px 10px;
    vertical-align: top;
    }
    table.General tbody tr.First td {
    border-top: 0;
    }
 
 
    /* Cart Contents Table */
    .CartContents tbody td {
    border-bottom: 0;
    }
    .CartContents .ProductName a {
    font-weight: bold;
    }
    .CartContents tfoot .SubTotal td {
    text-align: right;
    font-weight: bold;
    }
    .ProceedToCheckout {
    text-align: right;
    }
    .Content .ProceedToCheckout {
    width: 200px;
    float: right;
    }
    .ProceedToCheckout a {
    padding-top: 5px;
    }
 
    .ProductOptionList {
    margin-bottom: 10px;
    }
 
 
    .MiniCart .SubTotal {
    text-align: center;
    font-size: 115%;
    }
    .MiniCart .CartProductOptionList {
    display: block;
    }
    .JustAddedProduct {
    width: 128px;
    overflow: hidden;
    margin: auto;
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
    }
    .JustAddedProduct strong, .JustAddedProduct a {
    font-weight: bold;
    font-size: 1.02em;
    display: block;
    margin-bottom: 3px;
    }
 
 
    .CategoryPagination .PagingList, .CategoryPagination .PagingList li {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .CategoryPagination {
    padding: 5px;
    text-align: center;
    }
    .CategoryPagination .PagingList li {
    display: inline;
    padding: 0 5px;
    }