Solved

Make background container grow with either div column

Posted on 2012-04-01
3
246 Views
Last Modified: 2012-04-01
I have a website with two main div columns - a sidebar & a main content area. Behind them I have a background that needs to grow if either column grows. As you can see here http://ariettalaw.techbots.info/html/chapter7.php the right column extends past the main_body container. How do I make the main_body stretch if either sub_content or left_sidebar grows? Here  is the home page with the left_sidebar longer so you can see what the background image is supposed to look like. I want 70px of the background image to show below the sub_content.

Here are the three elements:
#main_body {
	width:1000px;	
	margin: 0 auto;
	background: url(/images/main_body_bg.jpg) no-repeat left bottom;	
	background-color:#466A93;
	overflow: hidden;
}

#sub_content {
	float:right;
	position: fixed;
	margin-left:319px;
	margin-top:0;
	padding:5px 40px 60px 45px ;
	width:596px;
	background: #FFFFFF url(/images/home_main_content_bottom.jpg) no-repeat left bottom;	
	margin-bottom:70px;
}

#left_sidebar {	
	width:319px;
	float:left;
	margin:0;
}

Open in new window

0
Comment
Question by:techbots
[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
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 37793779
There are several ways to achieve this:
Here is the CSS way.
And here is the JavaScript way.
These are just samples; Google more for "equal height"
0
 
LVL 1

Author Comment

by:techbots
ID: 37793901
Unfortunately neither option worked. I added a float to the main_body as the CSS way suggested. That should have done it but it didn't.

The Javascript way is not what I need - I don't need the columns to be the same height, I need the main container background to match the tallest column height.
0
 
LVL 1

Author Closing Comment

by:techbots
ID: 37794044
Actually the CSS way posted above does work. After adding the float to the main_body, I realized that it was the "position:absolute;" on the sub_content that was causing the problem. Removing that made the background height work.

I am giving a "C" for the response because it was an incomplete answer and the advice to Google "equal height" was not helpful! I came here after already Googling for hours.

(Now I have another issue that I will post in a separate question.)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

696 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