Solved

Make background container grow with either div column

Posted on 2012-04-01
3
243 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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

777 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