Solved

Full Height Columns, need help

Posted on 2011-02-20
7
222 Views
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.
index.html
main.css
0
Comment
Question by:VAN_AL
  • 3
  • 2
  • 2
7 Comments
 
LVL 16

Expert Comment

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

Expert Comment

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

Expert Comment

by:blueghozt
ID: 34943636
Hi,

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
0
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.

 
LVL 1

Author Comment

by:VAN_AL
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?
0
 
LVL 6

Accepted Solution

by:
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
0
 
LVL 1

Author Comment

by:VAN_AL
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?
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 34966153
HI bueghozt, can you help with my last request ?
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

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

939 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

10 Experts available now in Live!

Get 1:1 Help Now