Full Height Columns, need help

Posted on 2011-02-20
Last Modified: 2012-05-11
Hi Guys,

I would like to have my left sidebar expand the full height of my container the white background of the sidebar should be the full length of the container length but also increase in size as the content column (right column) is filled with more text, which is the right hand column, how do I do that? I've tried googling and trying a few things but everything requires me to break my current design and re-do it all form start, i would like to get some help with this and see if a quick fix could be achieved without losing my current design.
Question by:VAN_AL
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
  • 3
  • 2
  • 2
LVL 16

Expert Comment

ID: 34941041
Try this:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
LVL 16

Expert Comment

ID: 34941051
Sorry, I wanted to say that you can use JavaScript to make columns with same height.

Expert Comment

ID: 34943636

The easiest way is to use a background image on the container div - I have prepared a background gif that acts as background to the #container2 div you have (I accommodated your left margin of 15px so if you change that you may need to change the image) - I also made #container2 the same width as #container with centering - hope the attached does the trick for you. main.css background image to emulate column height
Independent Software Vendors: 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!


Author Comment

ID: 34944979
Thanks @blueghozt that does the trick, however I've now lost my transperant background for the container div? How do I get that back and have this functionality stay?

Accepted Solution

blueghozt earned 500 total points
ID: 34944990
I think you might have erroneously put in a z-index: -1 for the container div - that might be the problem - layering the backgrounds should not be an issue

Author Comment

ID: 34945200
Got it, you see what I was doing earlier was i had a rss feed link and icon in my side bar and have it a certain margin, so that it would push the sidebar background all the way to the bottom of the edge and because I wanted the rss icon to appear 10px above the bottom of the sidebar?

Author Comment

ID: 34966153
HI bueghozt, can you help with my last request ?

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress themes CSS? 6 30
bootstrap wrap text 1 30
Top Aligning Inner Divs 5 22
Web page design problem 3 12
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

740 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