Solved

Make background container grow with either div column

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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

726 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