Improve company productivity with a Business Account.Sign Up

x
?
Solved

balancing CSS columns

Posted on 2013-05-25
5
Medium Priority
?
187 Views
Last Modified: 2013-05-30
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
0
Comment
Question by:Eric Bourland
5 Comments
 
LVL 10

Assisted Solution

by:Ishaan Rawat
Ishaan Rawat earned 500 total points
ID: 39196859
0
 
LVL 55

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39196910
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1000 total points
ID: 39196951
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
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 1000 total points
ID: 39196961
or, you could do this:

#contentRow {
clear: both;
background-color: #f7f4f1;
width: 95%;
height: 100%;
margin: 0 auto;
display: table;
}
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39208821
I did indeed have the wrong background color specified. =) Thank you, friends. It is working now.

Eric
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question