Results 1 to 4 of 4

Thread: CSS columns not staying

  1. #1
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS columns not staying

    I got a 3 column layout from this site that I'm trying to utilize with what I have already done, so far so good till I got to this part. The problem I'm having is that I can't expand the content column without forcing the leftcolumn to move down, won't stay put. So consequently if I start filling the contentcolumn up when I test it the nav menu is all the way at the bottom of the scree, argh. I've searched but can't seem to find anything to help me out, I'm sure it's something simple. Sorry for the length I deleted out most of the content to keep it short. TIA for the help.

    CSS

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    #maincontainer{
    width: 840px; /*Width of main container*/
    height: 600px; /*Height of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }

    #contentwrapper{
    float: none;
    width: 100%;
    }

    #contentcolumn{
    margin-left: 225px; /*Set left margin to LeftColumnWidth*/
    float: none;
    }

    #leftcolumn .glossymenu li ul{{
    width: 225px; /*Width of left column*/
    margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px;
    height: 185px;
    border-top: thin;
    border-top: black;
    z-index: 1;
    float: left;
    }
    .glossymenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px;
    border-top: thin;
    border-top: black;
    z-index: 1;
    }
    .glossymenu li {
    position: relative;
    z-index: 1;
    }
    .glossymenu li a {
    background: white url(file:///U:/restaurantsuppliersonline/_images/glossyback.gif) repeat-x bottom left;
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: black;
    border-top: thin;
    border-top: black;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
    z-index: 1;
    }
    .glossymenu li ul {
    position: absolute;
    width: 190px;
    left: 0;
    top: 0;
    display: none;
    z-index: 1;
    }
    .glossymenu li ul li {
    float: left;
    z-index: 1;
    }
    .glossymenu li ul a {
    width: 180px;
    z-index: 1;
    }
    .glossymenu .arrowdiv {
    position: absolute;
    right: 2px;
    background: transparent url(file:///U:/restaurantsuppliersonline/_images/arrow.gif) no-repeat center right;
    z-index: 1;
    }
    .glossymenu li a:active {
    color: white;
    z-index: 1;
    }
    .glossymenu li a:visited {
    color: white;
    z-index: 1;
    }
    .glossymenu li a:hover {
    background-image: url(file:///U:/restaurantsuppliersonline/_images/glossyback2.gif);
    z-index: 1;
    }

    * html .glossymenu li {
    float: left;
    height: 1%;
    z-index: 1;
    }
    * html .glossymenu li a {
    height: 1%;
    z-index: 1;
    }}

    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

    #footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    HTML

    <body>
    <div id="maincontainer">
    <div id="topsection" style="height: 132px">
    <div class="innertube" style="height: 71px"></div></div>
    <div id="contentcolumn" style="height: 3px; left: 0px; top: 9px; width: 556px;"></div>
    <div id="leftcolumn" style="width: 192px" class="style1">
    <ul id="cssverticalmenu" class="glossymenu"></div>
    <div id="footer"><a href=""></a></div></div>

  2. #2
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok upon further evaluation of this, it appears to me that the contentwrapper is what is interferring. How do I tell it to extend the wrapper to the bottom of the screen just above the footer? I think if I'm not mistaken will allow me to then fill the content column without screwing up or adjusting the nav menu I have setup on the left.

  3. #3
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Problem fixed. Had to start from scrath isolate what was causing it and reconstruct it. Boy that was fun replying to myself.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    for future references, please use [code][/code] tags when posting computer code.

Bookmarks

Posting Permissions

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