background doesn't stretch at height:100%

[shortshire]

Hello Everybody,

I have a background in my container that is supposed to stretch 100%. There is text in the container but FF and Opera are unable to stretch. The text is on the barren background. In IE7, the background works but i'm not sure what is wrong with the other browsers. That are two div in the container that is splitting my text up into two columns. I think this is the problem but i'm not sure. Can someone please help me with this.

[Fotiman]

Please post some code (both HTML and CSS).

hat are two div in the container that is splitting my text up into two columns.

If both of these divs are floated, that takes them out of the flow, so their parent is essentially empty. Try adding this after the two columns. If the background shows up, then that's why:

<br style="clear:both">

[edited by: Fotiman at 10:05 pm (utc) on Dec. 7, 2006]

[shortshire]

This is my css code

#container{
margin-left:auto;
margin-right:auto;
width:750px;
}
#main{
width:750px;
text-align:right;
height:100%;
background-image:url(../images/MBAbodyimage1pix.gif);
background-repeat:repeat-y;
background-position:center;
}
.styleleft{
float:left;
width:350px;
text-align:left;
margin-left:10px;
padding-left:10px;
}
.styleright{
float:right;
width:330px;
text-align:left;
margin-right:10px;
padding-right:10px;
}

And here is the html code to go with it, i'm sorry about that, i wasn't sure if i was allowed to put up code

<div id="main">
<div class="styleright">
 <img src="images/MBAphoto.gif" alt="mba progrma" />
 <p><img src="images/MBAphototext.gif" alt="Westwood College Online's MBA courses are comprehensive and applicable to students' personal goals. Stuadents select from specific concentrations in orger to tailer their degree to fir their own needs."/></p>
 <div id="form"></div>
</div>
 <div class="styleleft">
  <h4>Master of Business Administration Online Program Objectives</h4>
  <p>The online MBA program at Westwood College is comprehensive, flexible, and beneficial for your business career and students can potentially earn a Master of Business Administration degree in as little as twelve months. For working professionals and other busy people, earning an MBA through distance learning is a great solution. It's time to take the initiative and learn the necessary skills of sound business management.</p>
  <p>Westwood College's online MBA program incorporates hands-on case studies and interactive simulations as instructional techniques. These multimedia simulations provide opportunities for students to practice what they learn in "real world" situations. They encounter decision-making situations that mirror those that may be faced in future careers. This hands-on aspect of the online MBA program gives students a chance to apply their business knowledge to scenarios that they may face in their current jobs or after completing their degree.</p>
 </div>
 </div>

This is the part of the code i'm working with but for some reason it just doesn't work. I know i'm probably missing a fundamental here but I am just not seeing it. Thank you who can help me.

[Fotiman]

As I stated in my first reply:

If both of these divs are floated, that takes them out of the flow, so their parent is essentially empty. Try adding this after the two columns. If the background shows up, then that's why:

<br style="clear:both">

That's your answer. So in your code, add this:

</p>
</div> <!-- styleright -->
<br style="clear:both">
</div> <!-- main -->

Also, it's not a good idea to use ids and classnames that describe presentation like "styleright" and "styleleft". What if you later move those around? Instead, give them names that describe the content.

Hope that helps.

[edited by: Fotiman at 10:51 pm (utc) on Dec. 7, 2006]

[shortshire]

Thanks Fotiman, that helps out a lot.