Link to home
Create AccountLog in
Avatar of Eric Bourland
Eric BourlandFlag for United States of America

asked on

balancing CSS columns

For some reason the Aslett hack does not work to balance these columns. Please see here:

http://test2.ebwebwork.com/pages/Welcome.cfm

The right side brown column needs to extend down to the foot of its container.

Here is the markup:

Left col:
#LeftContentIndex      {
float:left;
width:100%;
height:auto;
background-color:#f7f4f1;
margin-top:-40px;
padding:0 2em;
}


Right col:
#RightContent      {
float:right;
width:26%;
height:100%;
background-color:#634730;
text-align:center;
}

container and Aslett hack:
#contentRow      {
clear:both;
background-color:#f7f4f1;
width:95%;
height:100%;
margin:0 auto;
                  }

 /*Aslett Hack for float----------------- */
#contentRow:after{       content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
 }


What am I missing here? Something simple I am sure. Thank you for your advice.

Eric
SOLUTION
Avatar of Ishaan Rawat
Ishaan Rawat
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Eric Bourland

ASKER

I did indeed have the wrong background color specified. =) Thank you, friends. It is working now.

Eric