youngsc
04-10-2008, 03:25 PM
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>
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>