trying to get two vertical divs to be the same length.

Hi,

I have continued slowly to develop the html part of my site (in between perl code learning) and have hit a hurdle with the css.

I wouild appreciate any help that you guys can give. The white part of the page (Presently called the rightdiv), is of varying length from page to page. I want to make sure that the left div (with the menu in it) always holds the same length as the whits part and that they always meet with the footer div (at the bottom).



link removed

and here's the css where its the left div and the right div I'm having the problem with.

body {
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
font-size : 1em;
text-align: center;
background: url(/images/bkgrnd2.jpg);
margin : 0;
background-color : #ffffff;
vertical-align : top;
min-height : 100%;
color: #000040;
padding : 0;
}

div#headerdiv {
width : 99%;
vertical-align : bottom;
margin : auto;
margin-left : auto;
margin-right : auto;
text-align : center;
background-color : #ffffff;
}

div#header {
height : 125px;
background-image : url(http://.com/images/ddee.jpg);
background-repeat : no-repeat;
background-color : #808080;}

div#header img.logo {
float : left;
height : 125px;
background-color : transparent;
}

div#header img.strapline{
float : right;
height : 68px;
margin-top : 50px;}


div#topmenu {

background-color : #785B83;
padding: 0;
margin-top: 0;
text-align: right;
border : 1px solid #E5F9FF;
}


#topmenu ul
{
text-transform: lowercase;
display: inline;
white-space: nowrap;
margin: 0;
padding: 0 ;
border-left: 1px #E5F9FF dashed;
}

#topmenu ul li
{
display: inline;
list-style: none;
border-right: 1px dashed #E5F9FF;
padding: 0 5px;
}

#topmenu a {
padding: 0;
}

#topmenu a:link, #topmenu a:visited
{
color: #E5F9FF;
text-decoration: none;
font-size : smaller;
font-weight : normal;
}

#topmenu a:hover
{
color : #000040;
text-decoration: none;
background: url(/images/bkgrnd2.jpg);
}


#footer {
clear : both;
height : 25px;
background-color : #785B83;
}

div#bottommenu {
float : left;
background-color: #000040;
padding: 0;
margin-top: 0;
text-align: center;
}

#bottommenu ul
{

display: inline;
white-space: nowrap;
margin: 0;
padding: 0 ;
border-left: 1px #E5F9FF dashed;
}

#bottommenu ul li
{
display: inline;
list-style: none;
font-size: 10px;
border-right: 1px dashed #E5F9FF;
padding: 0 5px;
}

#bottommenu a {
padding: 0 5px;
}

#bottommenu a:link, #bottommenu a:visited
{
color: #E5F9FF;
text-decoration: none;
font-weight : bold;
}

#bottommenu a:hover
{
color : #000040;
text-decoration: none;
background-color: #E5F9FF;
}







/* THIS IS THE CSS FOR THE THUMBS IN CHOOSE.PL & IN SOURCE.PL */
#leftdivchoose {
width : 37%;
float : left;
border : 0;
padding-left : 0;
margin : 0;
}



div#leftdivchoose p {
padding : 0 20px;
text-align : left;
}

/* END OF CHOOSE.PL STYLES*/



.imagemenu:active {
color: #aaaaaa;
background-color: #CFCFCF;
}
.table {
margin : auto auto;
text-align : center;
font-size : small;

}

#centerdiv {
color : #000040;
text-align : center;
background-color : transparent;
margin : auto auto;
width : 100%;
height: 80%;
font-size : smaller;
}



/* LEFT AND RIGHT DIVS */

#leftdiv, #rightdiv {
float : left;
color : #000040;
text-align : left;
background-color : transparent;
margin-top : 5px;
margin-right : 0px;
padding : 35px 0;
height: 90%;
border: solid #785B83;
border-width : 0 4px;
line-height : 20px;
min-height : 530px;
}

#leftdiv {

float : left;
border : 0;
padding-left : 0;
margin : 0;
min-height : 930px;
background-image : url('images/menubkgrnd.jpg');
}

div#productnavbar1 {
float : left;
#background-color: #785B83;
background-image : url('images/menubkgrnd.jpg');
border : 1px solid #e5f9ff;
border-top : 0 ;
text-align: left;
margin-top : -35px;
width : 190px;
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
}

div#productnavbar1 h3 {
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
font-size : 1.1em;
margin-left : 20px;
padding-top : 10px;
padding-bottom : 10px;
}

div#productnavbar1 ul {
background-color: transparent;
display: block;
white-space: nowrap;
margin-top : -15px;
margin-bottom : 0;


}

div#productnavbar1 ul li
{
display : block;
list-style-type: none;
line-height : 25px;
border-bottom : 1px solid #000040;
background-color : #785B83;
margin-left : -40px;

}

div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
color: #E5F9FF;
text-decoration: none;
font-size : .9em;
font-weight : normal;
width : 98%;
display : block;
padding-left : 2%;
}


div#productnavbar1 ul li a:visited {
background-color: transparent;
color : #E5F9FF;
width : 98%;
}

div#productnavbar1 ul li a:hover {

color : #000040;
background: url(/images/bkgrnd2.jpg);
width : 100%;
display : block;
width : 98%;
}

#rightdiv {
float : left;
width : 48%;
line-height : 25px;
padding : 25px;
margin : 0 ;
text-align : justify;
color : #000040;
background-color : #ffffff;
height : 100%;
}

#rightdiv a:link, a:visited, a:hover {

color: #000040;
text-decoration: none;
font-weight : bold;
}

#rightdiv a:hover {
background-color: transparent;

color : #785B83;
}




.enquiryform {
font-size : small;
color : #7b3b61;
margin-top : 10pt;
margin-bottom : 50pt;
padding-top : 25pt;
padding-bottom : 3%;
text-align : center;
}

.bottomdiv {
margin : auto auto;
text-align : center;
width : 100%;
clear : both;
}

.addressbox {
float : right;
height : 15px;
margin : 5px auto auto;
background : transparent;
font-size: 11px;
color: #ffffff;
vertical-align : middle;
padding : 0 25px;
}

/* FORM BUTTONS STYLES */




#buttons input, #buttons a:link, #buttons a:visited, #buttons a:active, #buttons a:hover {
font-size: small;
color: #000040;
text-decoration: none;
font-weight : bold;
overflow: hidden;
background-color: #E5F9FF;
border : 1px #000000 solid;
height : 22px;
padding : 1px;}



.textbox {
color : #000040;
background-color : #E5F9FF;
border : 1px #000040 dotted;
font-size : 12px;
height : 15px;
width : 300px;}


.textarea {
color : #000040;
background-color : #E5F9FF;
border : 1px #000040 dotted;
font-size :12px;
height : 150px;
width : 300px;
}

.filledtextbox {
color : #000040;
background-color : #E5F9FF;
border : 0px #000040 dotted;
font-size : 12px;
height : 15px;
width : 300px;}


.filledtextarea {
color : #000040;
background-color :#E5F9FF;
border : 0px #000040 dotted;
font-size :12px;
height : 150px;
width : 300px;
}


.ipixdisplaypage {
width : 100%;
text-align : center;
}

/*THIS IS THE CONTROL PANEL STUFF*/
div#centerdiv h2 {
margin : auto auto;
font-family : "Comic Sans MS", verdana, sans-serif, arial, helvetica;
color : #808080;
padding-bottom : 20px;
}

/*LEFT DIV*/

div#mainleft {
float : left;
width : 40%;
padding : 25px;
text-align : center;
margin-left : 10px;
}



div#mainleft legend {
font-weight : bold;
color : #004040;
}

div#mainleft fieldset {

padding : 10px;
background-color : transparent;
text-align : right;
}


div#mainleft dt {
float : left;
clear : left;
}

div#mainleft dl dd {
background-color : #transparent;
float :right;
text-align : right;
clear : right;
}

div#mainleft a:link, div#mainleft a:visited, div#mainleft a:hover, div#mainleft a:active {

font-weight : bold;
text-decoration : none;
color : #a08888;
background-color : transparent;
font-size : 1em;
}


div#mainleft a:hover {
color : #bbaacc;
background-color : transparent;
}


/*RIGHT DIV*/

#mainright {
float : right;
width : 40%;
padding : 25px;
text-align : center;
margin-right : 10px;}



#mainright legend {
font-weight : bold;
color : #004040;
}

#mainright fieldset {

padding : 10px;
background-color : transparent;
}

#mainright dl {
background-color : transparent;
}

#mainright dt {
float : left;
clear : left;
}

#mainright dl dd {
background-color : transparent;
float :right;
text-align : right;
clear : right;
}

#mainright a:link, #mainright a:visited, #mainright a:hover, #mainright a:active {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
font-weight : bold;
text-decoration : none;
color : #A08888;
background-color : transparent;
font-size : 1em;
}


#mainright a:hover {
color : #bbaacc;
background-color : transparent;
}

/* CLOSING ELEMENT BELOW DIV'S */

div#closing {
margin : auto auto;
clear : both;
color : #eee;
}


/* THIS IS THE END OF THE CONTROL PANEL STUFF */




.mainimg
{
padding-left : 10%;
margin-left : 10%;
left : 25px;
}




Bazz

Ok this is what I would do Bazz - cheat!

Set the body background colour to the peachy colour you have on the right. Then take a 1px horizontal slice of your page, with the dark purple on the left - right accross the page to the peachy colour - then set this as a vertically tiled background image in the body tag, then get rid of any colours yuo have set as backgrounds in your divs.

Kind regards,

Gary

EDIT: By the way, the site is looking a LOT nicer now ;)

lol.

I was nearly going to say that that wouldn't work with a fluid design. But then I remember I haven't really got one. :eek:
In the absence of another solution I'll try it.

thanks

Bazz

Oh, just caught your edit. As you probably know, I haven't put it in the reveiws section yet but whadja fink.... is the eft div too dark. should the colors be sort of comparatively speaking, faded?

Bazz