Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
  1. #1

    problem with setting equal height of 2 columns

    ADS NOT VISIBLE TO MEMBERS
    hi,

    i am learning css and trying to improve my skills in each project. so this time i have tried with a design that has 2 columns in the left column their is a sub navigation menu and on the right side their is heading and the text content related to the page. now due to the design requirements i have used the position : absolute and z-index : 1 property for my sub navigation. so the sub navigation is of 20 sub links and the text on the right side is less in some pages. so in those pages the sub navigation overlaps the main page and then the page height stops where the text contents finishes but the left column height goes on till the end of the sub navigation overlaying the page and its footer.

    here is the code of my page and i am also attaching a screen shot of the page to get a better idea of the error.

    HTML Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta http-equiv="imagetoolbar" content="false" / >
    <title>:: Company Name - Products</title>
    
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 7.]>
    <script defer type="text/javascript" src="js/pngfix.js"></script>
    <![endif]-->
    
    </head>
    <body>
    <div id="insideTopContainer">
      <div id="wraperTop">
        <div class="header">
          <div class="right-nav">
            <ul>
              <li class="home"><a href="index.html" title="Home">Home</a></li>
              <li class="last siteMap"><a href="site_map.html" title="Site Map">Site Map</a></li>
            </ul>
          </div>
          <div id="topNavBg">
            <div id="topNav">
              <ul id="menu">
                <li class="menu1"><a href="about.html" title="">About Us</a></li>
                <li class="menu2"><a href="products.html" title="">Products</a></li>
                <li class="menu3"><a href="newsletter.html" title="">Newsletter</a></li>
                <li class="menu4"><a href="stock-check.html" title="">Stock Check</a></li>
                <li class="menu5"><a href="careers.html" title="">Careers</a></li>
                <li class="menu6"><a href="contact.html" title="">Contact</a></li>
              </ul>
            </div>
            <div id="quickNav"><img src="images/quickLinks.jpg" alt="Spetra" width="177" height="22" /></div>
          </div>
        </div>
        <div class="insideBannerProducts">
             <div class="heading">Our Products</div>
        </div>
      </div>
    </div>
    <div id="mainContainer">
         <div id="wraperMain">
              <div class="mainPage">
                   <div class="insideBannerBottomBg">&nbsp;</div>
                   <div id="left_coloumn">
                        <div id="sublink">
                    <div class="sublink_top"><img src="images/subLinksTop.jpg" alt="Company Name" width="218" height="37" align="left" /></div>
                    <div class="sublink_main">
                        <ul id="submenu">
                            <li class="active"><a href="#"><span>Product1</span></a></li>
                               <li><a href="#"><span>Product2</span></a></li>
                            <li><a href="#"><span>Product3</span></a></li>
                            <li><a href="#"><span>Product4</span></a></li>
                            <li><a href="#"><span>Product5</span></a></li>
                            <li><a href="#"><span>Product6</span></a></li>
                            <li><a href="#"><span>Product7</span></a></li>
                            <li><a href="#"><span>Product8</span></a></li>
                            <li><a href="#"><span>Product9</span></a></li>
                            <li><a href="#"><span>Product10</span></a></li>
                            <li><a href="#"><span>Product11</span></a></li>
                            <li><a href="#"><span>Product12</span></a></li>
                            <li><a href="#"><span>Product13</span></a></li>
                            <li><a href="#"><span>Product14</span></a></li>
                            <li><a href="#"><span>Product15</span></a></li>
                            <li><a href="#"><span>Product16</span></a></li>
                            <li><a href="#"><span>Product17</span></a></li>
                            <li><a href="#"><span>Product18</span></a></li>
                            <li><a href="#"><span>Product19</span></a></li>
                             <li><a href="#"><span>Product20</span></a></li>
                        </ul>
                    </div>
                    <div class="sublink_bottom"><img src="images/subLinksBottom.jpg" alt="Company Name" width="218" height="28" align="left" /></div>
                    
                   </div>
                   <!--<div class="leftImg"><img src="images/img-connectivity-solutions.jpg" alt="Company Name" /></div>
                   <div class="leftImgBottom"><img src="images/img-about-plug.jpg" alt="Company Name" width="216" height="130" /></div>-->
                   
                </div>
                   <div id="right_coloumn">
                     <div id="pageHeading">
                             <!--<div class="headingPageBg"></div>
                             <div class="headingPageRightShadow"><img src="images/pageHeadRight.jpg" alt="Company Name" width="10" height="25" /></div>-->
                             <div class="headingText">Products</div>
                        </div>
                        <!--<div id="headingBottom"><img src="images/pageHeadbottom.jpg" alt="Company Name" /></div>-->
                        <div class="insideText">Dummy Text-- some text related to the product will be placed over here<bR /><br /></div>
                   
                   
                   </div>
                  
              </div>
         </div>
      
    </div>
    <div id="bottomContainer">
         <div id="wraperFooter">
              <div class="footerMain">
                    <div class="CopyrightText">All Content Copyrights  2008 Company Name  Pvt. Ltd.</div>
                   <div class="creatives">Site By: <a href="#" target="_blank">----</a></div>
              </div>
          
         </div>
    </div>
    </div>
    </body>
    </html>
    here is my main.css

    Code:
    @import url(../css/navigation.css);
    @import url(../css/inside.css);
    /* ---------Reset -------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre, div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
    }
    img {
        border: 0;             /* this squashes a Firefox bug */
        vertical-align: bottom; /* this squashes an IE bug */
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
    }
    
    fieldset,img { 
        border:0;
    }
    
    /* ------ End Reset ------ */
    
    body a:link {
        text-decoration: none;
    }
    body a:visited {
        text-decoration: none;
    }
    body a:hover {
        text-decoration: none;
    }
    body a:active {
        text-decoration: none; }
    * {margin:0;padding:0}
    .clearfix:after { 
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    * html .clearfix { height: 1%; }
    
    #topContainer {
        background-image: url(../images/topBg.jpg);
        background-repeat: repeat-x;
        background-position: left top;
        clear: both;
        float: left;
        height: 511px;
        width: 100%;
        overflow: hidden;
    }
    #wraperTop {
        margin-right: auto;
        margin-left: auto;
        width: 780px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: auto;
        overflow: hidden;
    }
    .header {
        background-image: url(../images/logo.jpg);
        background-position: 10px top;
        margin-top: 14px;
        margin-right: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
        background-repeat: no-repeat;
        padding: 0px;
        width: 100%;
        height: 142px;
        float: left;
        overflow: hidden;
    }
    
    #topNav {
        width: 510px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 6px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-top: 0px;
        height: 35px;
        float: left;
    }
    
    #topNavBg {
        background-image: url(../images/topNavBg.jpg);
        background-repeat: no-repeat;
        width: 760px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        margin-top: 80px;
        height: 35px;
        background-position: left top;
        padding: 0px;
    }
    .banner {
        margin-top: 0px;
        margin-right: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
        padding: 0px;
        width: 760px;
        height: 355px;
        float: left;
    }
    #flashcontent 
    {
        height: 355px;
        overflow: hidden;
        float: left;
        width: 760px;
        padding: 0px;    /*padding-top: 20px;
        padding-bottom: 20px;*/
        margin-top: auto;
        margin-right: 10px;
        margin-bottom: auto;
        margin-left: 10px;
        }
    #quickNav {
        width: 225px;
        margin-top: 6px;
        margin-right: 3px;
        margin-bottom: 6px;
        margin-left: 3px;
        text-align: right;
        height: 25px;
        float: left;
    }
    
    .mainPage {
        width: 780px;
        margin-top: auto;
        margin-right: 10px;
        margin-bottom: auto;
        margin-left: 10px;
        background-image: url(../images/mainPageBg.png);
        background-repeat: repeat;
        background-position: left center;
        overflow: hidden;
        height: auto;
        float: left;
    }
    * html .mainPage  {
      background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mainPageBg.png', sizingMethod='scale');
    }
    .welcome {
        width: 415px;
        float: left;
        margin-right: 40px;
        margin-left: 20px;
        margin-top: 15px;
    }
    .gallery {
        width: 272px;
        float: left;
        margin-right: 13px;
        margin-left: 0px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .normalText {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #6A7C7A;
        padding-top: 15px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 5px;
        line-height: 18px;
        text-align: justify;
    }
    .lineDivider {
        background-image: url(../images/lineDivider.jpg);
        background-repeat: repeat-x;
        height: 1px;
        width: 262px;
        margin-top: 25px;
        margin-right: 5px;
        margin-bottom: 25px;
        margin-left: 5px;
    }
    .footerMain {
        background-image:url(../images/footerBg.jpg);
        background-repeat: repeat;
         width:780px;
         height:62px;
         margin:0px 10px 0px 10px;
         float:left; 
    }
    .CopyrightText {
        width: 550px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #6A7C7A;
        padding-top: 20px;
        padding-right: 0px;
        padding-bottom: 15px;
        padding-left: 10px;
        float: left;
        margin-left: 10px;
    }
    .creatives {
        width: 140px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #6A7C7A;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 0px;
        text-align: right;
        float: right;
        margin-right: 15px;
    }
    .creatives a{
        color: #6A7C7A;
    }
    .creatives a:hover{
        color: #0A3430;
    }
    #wraperMain {
        margin-right: auto;
        margin-left: auto;
        width: 780px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: auto;
        overflow: hidden;
    }
    #mainContainer {
        background-image: url(../images/mainBg.jpg);
        background-repeat: repeat-x;
        clear: both;
        float: left;
        width: 100%;
        overflow: hidden;
        height: auto;
    }
    #wraperFooter {
        margin-right: auto;
        margin-left: auto;
        width: 780px;
        margin-top: 0px;
        margin-bottom: 0px;
        height: 62px;
        overflow: hidden;
    }
    #bottomContainer {
        clear: both;
        width: 100%;
        overflow: hidden;
        background-color: #87C38B;
        float: left;
        height: auto;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    below is my navigation.css

    Code:
    ul#menu
    {
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        list-style-type: none;
        font-size: 11px;
        line-height: 13px;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0px;
    }
    ul#menu li {
        float: left;
    }
    ul#menu li.menu1 a{
        width: 70px;
        background-image: none;
    }   /* new class to give width to each menu item individually */
    ul#menu li.menu2 a{width: 80px;}
    ul#menu li.menu3 a{width: 96px;}
    ul#menu li.menu4 a{width: 102px;}
    ul#menu li.menu5 a{width: 80px;}
    ul#menu li.menu6 a{width: 76px;}
     
    ul#menu a {
        display: block;
        height: 23px;                  /* item height replaces the bottom 10px padding adding to the height */
        color: #FFF;
        text-decoration: none;
        word-spacing: -1px;            /* pulls the words closer together in the long menu titles  */
        text-align: center;           /* no border+11px=11px for the top, no border+1px=1px for the sides :-) */
        background-image: url(../images/topNavSeperator.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 0;
        padding-left: 0px;
    }
    ul#menu li a:hover {
        color: #084A40;
    }
    
    /* _______________________ Right Navigation starts _______________________ */
    
     .right-nav {
        padding:0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #4BB2A2;
        font-size: 11px;
        margin-top: 20px;
        margin-right: auto;
        margin-left: 0px;
        background-position: left top;
        line-height: 15px;
        margin-bottom: 20px;
        height: 20px;
        text-align: right;
        width: 150px;
        float: right;
    } 
    
    .right-nav ul {
        padding: 0px;
        margin: 0px 0px 0px 0px;    
        list-style-type: none;
    }
    
    .right-nav li {
        display: inline;
        float: left;
        margin: 0px;
        border-right-width: 1px;
        border-right-style: dotted;
        border-right-color: #4BB2A4;
        padding-top: 0px;
        padding-right: 8px;
        padding-bottom: 0px;
        padding-left: 5px;
        background-position: left top;
        line-height: 15px;
        height: 20px;
    }
    .right-nav li.last  {
        border-right-style: none;
    }
    .right-nav li.home {
        background-image: url(../images/iconHome.gif);
        background-repeat: no-repeat;
        background-position: left 2px;
        text-indent: 10px;
        height: 20px;
        line-height: 15px;
    }
    .right-nav li.siteMap{
        background-image: url(../images/iconSiteMap.gif);
        background-repeat: no-repeat;
        background-position: 5px 2px;
        text-indent: 15px;
        height: 20px;
        line-height: 15px;
        width: auto;
        margin-left: 5px;
    }
    
    
    .right-nav li a, .right-nav li a:visited  {
        margin: 0px 0px 0px 5px;
        text-decoration: none;
        color: #4BB2A2;
        background-position: left top;
    }
    
    .right-nav li a:hover {
        color: #084A40;
        text-decoration: none;
    }
    
    .right-nav a.current:link, .right-nav a.current:visited {
    
        color: #084A40;
    
    }
    /* _______________________ Right Navigation end _______________________ */
    
    /* the sub menu start here*/
    ul#submenu {
        font-family: "Trebuchet MS";
        font-size: 12px;
        color: #3A7A70;
        padding: 0;
        vertical-align: middle;
        font-weight: bold;
        /*z-index: -1;*/
    }
    ul#submenu li {
        list-style: none;
        width: 218px;
        float:left;
        height: 39px;
        line-height:40px;
        clear: left;
    }
    ul#submenu a{
        color: #3A7A70;
        background-image: url(../images/subLinksBg.jpg);
        background-repeat: no-repeat;
        background-position: left;
        width:218px;
        float:left;
        height: 40px;
    }
    ul#submenu a:hover {
        background-repeat: no-repeat;
        background-position: left top;
        color: #3A7A70;
        background-image: url(../images/subLinksBgMo.jpg);
    }
    ul#submenu li.active a
    {
        background-repeat: no-repeat;
        background-position: left top;
        color: #3A7A70;
        background-image: url(../images/subLinksBgMo.jpg);
    }
    
    ul#submenu li.last span {
        border-bottom:none
    }
    ul#submenu a span{
        width:190px;
        text-indent:8px;
        float:left;
        height:40px;
        overflow:hidden;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 15px;
    }
    
    /* the sub menu ends here*/
    below is my inside.css

    Code:
    #insideTopContainer {
        background-image: url(../images/insideTopBg.jpg);
        background-repeat: repeat-x;
        background-position: left top;
        clear: both;
        float: left;
        height: 325px;
        width: 100%;
    }
    .insideBanner {
        margin-top: 0px;
        margin-right: 20px;
        margin-bottom: 0px;
        margin-left: 20px;
        padding: 0px;
        width: 760px;
        height: 169px;
        background-image: url(../images/insideAboutBanner.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        float: left;
    }
    .heading {
        font-family: "Trebuchet MS";
        font-size: 30px;
        color: #FFFFFF;
        margin-top: 75px;
        margin-right: auto;
        margin-left: 75px;
    }
    .insideBannerBottomBg {
        width: 759.5px;
        margin-top: 0px;
        margin-right: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
        background-image: url(../images/img-bannerBottom-bg.png);
        background-repeat: repeat-x;
        background-position: left center;
        overflow: hidden;
        height: 28px;
    }
    * html .insideBannerBottomBg  {
      background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/img-bannerBottom-bg.png', sizingMethod='scale');
    }
    #left_coloumn {
        width: 218px;
        margin-left:18px;
        margin-right:22px;
        overflow: visible;
        margin-top: auto;
        margin-bottom: auto;
        height: 100%;
        float: left;
        /*position:absolute;
        top:325px;
        left:100;
        z-index:1;*/
    }
    
    #right_coloumn {
        width: 484px;
        margin-right: 15px;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        top:0px;
        left:0;
        z-index:-1;
        float: right;
    }
    #sublink {
        /*margin-top: 15px;
        height: 131px;*/
        overflow: visible;
        position:absolute;
        top:325px;
        z-index:1;
        float: left;
        height: auto;
        margin-bottom: 20px;
        left: 100;
        width: 218px;
    }
    .sublinksTop
    {
        width:218px;
        height:37px;
        background-repeat: no-repeat;
        background-position: left top;
        position:absolute;
        top:0px;
        left:0;
        z-index:1;
        clear: both;
    }
    .sublinksMain 
    {
        height: 100%;
        width:218px;
        float: left;
        clear: both;
        /*clear: both;
        float: left;*/
    }
    .sublinksBottom {
        background-image: url(../images/subLinksBottom.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        height: 28px;
        width: 218px;
        overflow: hidden;
        position: absolute;
        z-index: 1;
        float: left;
        clear: both;
    }
    .leftImg {
        margin-top: 190px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
    }
    .leftImgBottom {
    
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
    }
    #pageHeading {
        height: 50px;
        width: 484px;
        margin: 0px;
        position: relative;
        z-index: 1;
        overflow: visible;
        top: -2px;
        clear: both;
        float: left;
        background-image: url(../images/pageHeadBg.jpg);
        background-repeat: no-repeat;
        background-position: left top;
    }
    /*.headingPageBg {
        background-image: url(../images/pageHeadBg.jpg);
        background-repeat: repeat-x;
        background-position: left top;
        width: 474px;
        height: 25px;
        margin: 0px;
        float: left;
    }
    .headingPageRightShadow {
        width: 10px;
        height: 25px;
        float: left;
        margin: 0px;
        padding: 0px;
    }
    #headingBottom {
        height: 25px;
        width: 482px;
        float: left;
        clear: both;
        margin: 0px;
        padding: 0px;
    }*/
    .headingText {
        font-family: "Trebuchet MS";
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 15px;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
    .insideText {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #6A7C7A;
        padding-top: 20px;
        padding-right: 5px;
        padding-bottom: 0px;
        padding-left: 5px;
        line-height: 15px;
        text-align: justify;
        margin-right: 5px;
        margin-left: 5px;
    }
    .leftImgInside {
    
        margin-top: 30px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
    }
    /* ~_~_~_~_~_~_~_~_~_~_~_~_ Form code starts ~_~_~_~_~_~_~_~_~_~_~_~_ */
    .fieldset {
        width:400px;
        float: left;
        margin: 10px 0px 0px 10px;
        font-family: Verdana, "Trebuchet MS",  Arial, sans-serif;
        font-size: 11px;
        color: #244259;
        border: 0px solid #A7A7A7;
    }
    
    .fieldset legend {
        font-weight: bold;
        color: #244259;
    }
    
    .fieldset legend, label {
        font-family: Verdana, "Trebuchet MS",  Arial, sans-serif;
        font-size: 11px;
        color: #244259;
    }
        
    .fieldset label {
        width:110px;
        float:left;
        padding:0.2em;
        margin:0px;
        margin-top:0.3em;
        }
    
    .required {
        color: red; 
        text-align: left;
    }
    
    .fieldset .nobr {display:none;}  
    
    .textfield, .textarea, .button_style {
        font-family: Verdana, "Trebuchet MS",  Arial, sans-serif;
        font-size: 11px;
        color: #244259;
    }
    
    .fieldset .textfield {
        margin:4px;
        border: 1px solid #A7A7A7;
        
    }
    
    .fieldset .textarea {
        margin:4px;
        border: 1px solid #A7A7A7;
    }
    
    
    .button_style {
        background-color: #fff;
        border: 1px solid #A7A7A7;
        color: #40576E;
        padding: 4px 0px 13px 0px;
        width:60px; 
        height:23px;
        margin: 0px 0px 0px 30px;
        font-weight: bold; 
    }
    
    
    /* ~_~_~_~_~_~_~_~_~_~_~_~_  Form code starts ~_~_~_~_~_~_~_~_~_~_~_~_ */.insideBannerMain {
    
        margin-top: 0px;
        margin-right: 20px;
        margin-bottom: 0px;
        margin-left: 20px;
        padding: 0px;
        width: 760px;
        height: 169px;
        float: left;
    }
    .insideBannerLeft {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding: 0px;
        width: 300px;
        height: 169px;
        float: left;
        background-image: url(../images/bannerHeadingBg.jpg);
        background-repeat: no-repeat;
        background-position: left top;
    }
    .insideBannerright {
        padding: 0px;
        width: 460px;
        height: 169px;
        float: left;
        margin: 0px;
    }
    .insideBannerProducts {
    
        margin-top: 0px;
        margin-right: 20px;
        margin-bottom: 0px;
        margin-left: 20px;
        padding: 0px;
        width: 760px;
        height: 169px;
        background-image: url(../images/bannerProducts.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        float: left;
    }
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	productPage.jpg 
Views:	92 
Size:	60.1 KB 
ID:	670  

  2. #2
    Drop a lot of the divs. there are waaaay too many. You just need a wrapper, a left column, a right column and a footer for that design. Float the left and right columns, err, left and right. This should mean you don't have to use z-index which means that the sidebar won't overlap.

  3. #3
    tommylogic's Avatar
    Join Date
    Apr 2007
    Location
    Virtually Everywhere
    Posts
    5,555
    Harry is spot on ... That's the exact layout for this site. Header (if you have one), Wrapper, left content, right content, footer

  4. #4
    hey thanks for the reply and i will try to solve my error from u r suggestion, but i used z-index because i wanted to adjust the sub navigation design with the continuing yellow color image with shadow. so i used position absolute and z-index for my sub navigation. which is inside my left column. so can u please look in to my code and image again and suggest me some solution to my error. so it will be great if u can give any example to solve my error in the css code from which i can adjust the sub navigation and the right column to the page length.

    hope u get what i tried to make u understand,
    Help Appreciated.

  5. #5
    tommylogic's Avatar
    Join Date
    Apr 2007
    Location
    Virtually Everywhere
    Posts
    5,555
    ADS NOT VISIBLE TO MEMBERS

Similar Threads

  1. Replies: 5
    Last Post: 05-02-2008, 12:17 PM
  2. Dynamically highlighted table columns
    By Harry in forum CSS Forum
    Replies: 2
    Last Post: 28-10-2007, 05:51 PM
  3. Lightbox question (change height)
    By tommyboy89 in forum CSS Forum
    Replies: 2
    Last Post: 27-06-2007, 04:31 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in