I have a 3 column css layout :-
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_intl.cfm?navarea=before_admit_intltrn&subnavarea=apply_intltrn">http://wsdev.colostate.edu/cwis116/admm ... ly_intltrn</a><!-- m -->
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_intl.cfm?navarea=before_admit_intltrn&subnavarea=app_chklist_intltrn">http://wsdev.colostate.edu/cwis116/admm ... st_intltrn</a><!-- m -->
How do I set the height of the page to be the maximum of the left, right and content columns.
Currently, I have the column height to be the maximum 1300px. Most of the pages have lesser content and there are pages which are blank for the most part, and we have to scroll to see the footer. When I tried height: 100%; on sub_layout, the few pages with longer content are rendered below the footer. Also height:auto; did not help.
The css is :- {relevant id's : body, sub_layout, left, right, content}
/* sub-pages */
body {
background-color :#cdc1a2;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
A:LINK, A:VISITED {
background-color : transparent;
color : #003300;
font-weight : bold;
text-decoration : none;
}
A:HOVER {
background-color : #003300;
color : #FFFFFF;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
.printBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 640px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
div{
font-size: xx-small;
border: 0px;
margin: 0px;
outline : 0px;
padding: 0px;
}
.xxsmall{
font-size: xx-small;
}
#sub_layout {
border-bottom : 1px solid #DDC642;
height : 1300px;
}
#left {
background-color: #040;
float : left;
width : 23%;
margin :0;
height : 1300px;
}
#right {
background-color: #ffffff;
float : right;
width : 23%;
margin :0;
border-left : 1px solid #004400;
height : 1300px;
}
span {
font-size :xx-small;
}
p{
font-size :xx-small
}
#subrightnavcontainer ul
{
position : relative;
top : 0;
margin : 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align : center;
/*font-size: 8pt;
font-weight :500;*/
}
#subrightnavcontainer a
{
display: block;
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #030;
color : #DDC642;
border-bottom: 1px solid #eee;
}
#subrightnavcontainer a:link, #navlist a:visited
{
color: #DDC642;
text-decoration: none;
}
#subrightnavcontainer a:hover
{
background-color: #e8d980;
color: #003300;
}
#content {
background-color: #ffffff;
margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;
padding : 0px;
padding-left : 5px;
border: 1px solid #fff;
}
#intl_content {
background-color: #ffffff;
margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;
padding : 0px;
padding-left : 5px;
border: 1px solid #fff;
}
/* others */
ul{
font-size : xx-small;
margin-bottom : 0;
margin-top : 0;
margin-left : 15px;
padding-left : 0px;
}
#right_li {
font-size:xx-small;
margin-left: 5px;
margin-bottom : 0;
margin-top : 0;
padding-left : 0;
}
#info {
font-weight : bolder;
font-size : 16px;
font-family : Verdana, Arial, sans-serif;
color : #003300;
}
.quick_facts{
background-color : #DDC642;
}
.greyback{
background-color : #005500;
text-align : center;
color:#DDC642;
}
#leftnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#leftnav a {
display: block;
color: #FFF;
background-color: #030;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#leftnav a:hover
{
background-color: #ddc642;
color: #FFF;
}
#leftnav li li a
{
display: block;
color: #FFF;
background-color: #050;
margin:0;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}
/* Fix IE. Hide from IE Mac \*/
* html #leftnav ul li { float: left; }
* html #leftnav ul li a { height: 1%; }
/* End */
.header{
font-size: small;
text-align : center;
}
#footer { text-align:center; background:#fff; margin:0 auto; width:100%;}
#subsearch { position : relative; top : 0px; background-color : #004400; color : #DDC642; margin : 0px; padding : 0px; border-bottom: 2px solid #DDC642;}
.greenback{
background-color : #005500;
text-align : center;
color:#DDC642;
width : 100%;
}
#table_cred{
border-spacing : 5px;
border-collapse : collapse;
}
#td_border {
border : 2px solid #004400;
margin : 2px;
padding : 1px;
/*border-collapse : collapse;*/
}
#th_bg {
background-color:#DDC642;
}You'll probably want to use "faux columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)".Thanks for the pointer.
I now have it working partially.
The URL is :-
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm">http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm</a><!-- m -->
Problems :-
1. The gold bar above the footer is not visible completly in IE 6 and towards the right column in mozilla/opera.
2. Is there a way to set the left border of the right column to be visible throughout the complete height of the right column? (Only a left green border for the white solid right column). Currently, since it is set in the #rightcol, it does not extend. I did not see a way to set it in #outer.
Thanks in advance.
CSS:
#outer {
border: solid white 0px;
border-left-width : 175px;
border-left-color : #003300;
border-left-style : solid;
border-right-color : #FFFFFF;
border-right-style : solid;
border-right-width : 175px;
background-color : #FFFFFF;
width : auto;
}
#inner { margin :0; width : 100%;}
#outer>#inner {border-bottom : 1px solid #DDC642;}
#leftcol {
float : left;
position : relative;
width : 175px;
margin-left : -175px;
margin-right : 1px;
}
#rightcol {
float : right;
position : relative;
width : 175px;
border-left : 1px solid #004400;
margin-right : -175px;
margin-left : 1px;
}
#maincol {
/*margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;*/
margin : 0 -8px 0 -2px;
float: left;
width : 100%;
}
.content {
padding : 5 px;
}
body {
background-color :#cdc1a2;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
.clear {
clear : both
}
#footer { text-align:center; background:#fff; margin:0 auto; width:100%;}1. How about making it the top border of the footer element?.
2. That's where faux columns would come in. Make a 1px by 1px graphic (or wider if desired) of the border color, then in the containing div set it as the background with "repeat-y" and with the x-coordinate to poisition it where you want it.Thanks.
I used a solid background for the right column and did not need the footer bar.
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_intl.cfm?navarea=before_admit_intltrn&subnavarea=apply_intltrn">http://wsdev.colostate.edu/cwis116/admm ... ly_intltrn</a><!-- m -->
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_intl.cfm?navarea=before_admit_intltrn&subnavarea=app_chklist_intltrn">http://wsdev.colostate.edu/cwis116/admm ... st_intltrn</a><!-- m -->
How do I set the height of the page to be the maximum of the left, right and content columns.
Currently, I have the column height to be the maximum 1300px. Most of the pages have lesser content and there are pages which are blank for the most part, and we have to scroll to see the footer. When I tried height: 100%; on sub_layout, the few pages with longer content are rendered below the footer. Also height:auto; did not help.
The css is :- {relevant id's : body, sub_layout, left, right, content}
/* sub-pages */
body {
background-color :#cdc1a2;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
A:LINK, A:VISITED {
background-color : transparent;
color : #003300;
font-weight : bold;
text-decoration : none;
}
A:HOVER {
background-color : #003300;
color : #FFFFFF;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
.printBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 640px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
div{
font-size: xx-small;
border: 0px;
margin: 0px;
outline : 0px;
padding: 0px;
}
.xxsmall{
font-size: xx-small;
}
#sub_layout {
border-bottom : 1px solid #DDC642;
height : 1300px;
}
#left {
background-color: #040;
float : left;
width : 23%;
margin :0;
height : 1300px;
}
#right {
background-color: #ffffff;
float : right;
width : 23%;
margin :0;
border-left : 1px solid #004400;
height : 1300px;
}
span {
font-size :xx-small;
}
p{
font-size :xx-small
}
#subrightnavcontainer ul
{
position : relative;
top : 0;
margin : 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
text-align : center;
/*font-size: 8pt;
font-weight :500;*/
}
#subrightnavcontainer a
{
display: block;
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #030;
color : #DDC642;
border-bottom: 1px solid #eee;
}
#subrightnavcontainer a:link, #navlist a:visited
{
color: #DDC642;
text-decoration: none;
}
#subrightnavcontainer a:hover
{
background-color: #e8d980;
color: #003300;
}
#content {
background-color: #ffffff;
margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;
padding : 0px;
padding-left : 5px;
border: 1px solid #fff;
}
#intl_content {
background-color: #ffffff;
margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;
padding : 0px;
padding-left : 5px;
border: 1px solid #fff;
}
/* others */
ul{
font-size : xx-small;
margin-bottom : 0;
margin-top : 0;
margin-left : 15px;
padding-left : 0px;
}
#right_li {
font-size:xx-small;
margin-left: 5px;
margin-bottom : 0;
margin-top : 0;
padding-left : 0;
}
#info {
font-weight : bolder;
font-size : 16px;
font-family : Verdana, Arial, sans-serif;
color : #003300;
}
.quick_facts{
background-color : #DDC642;
}
.greyback{
background-color : #005500;
text-align : center;
color:#DDC642;
}
#leftnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#leftnav a {
display: block;
color: #FFF;
background-color: #030;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#leftnav a:hover
{
background-color: #ddc642;
color: #FFF;
}
#leftnav li li a
{
display: block;
color: #FFF;
background-color: #050;
margin:0;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}
/* Fix IE. Hide from IE Mac \*/
* html #leftnav ul li { float: left; }
* html #leftnav ul li a { height: 1%; }
/* End */
.header{
font-size: small;
text-align : center;
}
#footer { text-align:center; background:#fff; margin:0 auto; width:100%;}
#subsearch { position : relative; top : 0px; background-color : #004400; color : #DDC642; margin : 0px; padding : 0px; border-bottom: 2px solid #DDC642;}
.greenback{
background-color : #005500;
text-align : center;
color:#DDC642;
width : 100%;
}
#table_cred{
border-spacing : 5px;
border-collapse : collapse;
}
#td_border {
border : 2px solid #004400;
margin : 2px;
padding : 1px;
/*border-collapse : collapse;*/
}
#th_bg {
background-color:#DDC642;
}You'll probably want to use "faux columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->)".Thanks for the pointer.
I now have it working partially.
The URL is :-
<!-- m --><a class="postlink" href="http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm">http://wsdev.colostate.edu/cwis116/admmock/dsp_fr.cfm</a><!-- m -->
Problems :-
1. The gold bar above the footer is not visible completly in IE 6 and towards the right column in mozilla/opera.
2. Is there a way to set the left border of the right column to be visible throughout the complete height of the right column? (Only a left green border for the white solid right column). Currently, since it is set in the #rightcol, it does not extend. I did not see a way to set it in #outer.
Thanks in advance.
CSS:
#outer {
border: solid white 0px;
border-left-width : 175px;
border-left-color : #003300;
border-left-style : solid;
border-right-color : #FFFFFF;
border-right-style : solid;
border-right-width : 175px;
background-color : #FFFFFF;
width : auto;
}
#inner { margin :0; width : 100%;}
#outer>#inner {border-bottom : 1px solid #DDC642;}
#leftcol {
float : left;
position : relative;
width : 175px;
margin-left : -175px;
margin-right : 1px;
}
#rightcol {
float : right;
position : relative;
width : 175px;
border-left : 1px solid #004400;
margin-right : -175px;
margin-left : 1px;
}
#maincol {
/*margin-left : 24%;
margin-right : 24%;
margin-top:0px;
margin-bottom:0px;*/
margin : 0 -8px 0 -2px;
float: left;
width : 100%;
}
.content {
padding : 5 px;
}
body {
background-color :#cdc1a2;
margin : 0px;
outline : 0px;
padding: 0px;
color: #000000;
font-family : Verdana, Arial, sans-serif;
text-align: center; /*for IE */
font-size: xx-small;
}
.pageBorder{
border : medium ridge #DDC642 ;
color : #000000;
padding : 0px 0px 0px 0px;
width : 760px;
margin: 0 auto; /* align for good browsers */
text-align: left;/* counter the body center good browsers*/
background-color : #ffffff;
}
.clear {
clear : both
}
#footer { text-align:center; background:#fff; margin:0 auto; width:100%;}1. How about making it the top border of the footer element?.
2. That's where faux columns would come in. Make a 1px by 1px graphic (or wider if desired) of the border color, then in the containing div set it as the background with "repeat-y" and with the x-coordinate to poisition it where you want it.Thanks.
I used a solid background for the right column and did not need the footer bar.