Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    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.
    Code:
    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
    Last edited by bazz; 03-18-2005 at 03:21 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cheat!

    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
    Last edited by Graft-Creative; 03-15-2005 at 09:01 PM.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.
    In the absence of another solution I'll try it.

    thanks

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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