problem with setting equal height of 2 columns

**nisha** · 20-09-2008, 07:17 AM

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;
}

**Harry** · 20-09-2008, 10:21 AM

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.

**tommylogic** · 20-09-2008, 01:36 PM

Harry is spot on ... That's the exact layout for this site. Header (if you have one), Wrapper, left content, right content, footer

**nisha** · 21-09-2008, 11:01 AM

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.

**tommylogic** · 21-09-2008, 02:50 PM

Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css

problem with setting equal height of 2 columns

LinkBack

Thread Tools

Display

problem with setting equal height of 2 columns

Similar Threads

Does Standards Compliant Equal Semantic Markup?

Page height won't stay at 100% when window size decreases - Help

Equal designs leading a website design company in india

Dynamically highlighted table columns

Lightbox question (change height)

Posting Permissions