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
LVL 3
Eric BourlandAsked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
You just have the wrong color specified. (But then if your left column is shorter than the right column, the left column won't extend down.)

#contentRow {
clear: both;
background-color:#634730;
width: 95%;
height: 100%;
margin: 0 auto;
}
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Have you considered using a framework like  http://twitter.github.io/bootstrap/index.html or http://foundation.zurb.com?  It makes this stuff a lot easier plus easy for making the site responsive for mobile.

You have a very nice start.
0
 
Kyle HamiltonData ScientistCommented:
or, you could do this:

#contentRow {
clear: both;
background-color: #f7f4f1;
width: 95%;
height: 100%;
margin: 0 auto;
display: table;
}
0
 
Eric BourlandAuthor Commented:
I did indeed have the wrong background color specified. =) Thank you, friends. It is working now.

Eric
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.