Solved

balancing CSS columns

Posted on 2013-05-25
5
164 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 9

Assisted Solution

by:Ishaan Rawat
Ishaan Rawat earned 125 total points
ID: 39196859
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 125 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 250 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 250 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
(URGENT) Help HTML and CSS Resizing Images 2 40
Why won't this text float to the left 8 26
stop navigation from wrapping 7 56
CSS z-index issue 3 20
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now