Solved

balancing CSS columns

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
dashicon not showing on one website 13 28
Hide un-named HTML Label with CSS 14 36
Change box shadow 1 29
How to create a slidershow with the use of the property cover in css 15 48
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

838 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