Solved

balancing CSS columns

Posted on 2013-05-25
5
170 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why a span is lower 2 31
Hide un-named HTML Label with CSS 14 41
Wordpress themes CSS? 6 30
Make page layout not change with page 1 25
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

730 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