Solved

Make background container grow with either div column

Posted on 2012-04-01
3
244 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
  • 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

856 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