XHTML dynamic container question

[RykeTech]

I am unsure how to describe this question, but I'll try my best. I am building a website in XHTML and have the text in a div over the background, which contains a box that I position the text in. Is there a way to get the box in the background to expand down when there is more text than box? If not, what is the best way to stretch the background box down to fit more text in?

One more issue I am having! The bulleted list will NOT display bullets. I think I have tried everything, but hopefully it's a simple fix.

I thank you all, below is some of the code I am working with.

XHTML page:

<div id="container">
	<div id="load"> <img src="images/photo.png" alt="" class="load"/> </div>
    <div id="load2"> <img src="images/photo2.png" alt="" class="load2"/> </div> 
    	<div id="wrapper_about">

        <div id="left_part_about">
        
                <p>
                "What ultimately shapes our lives are the questions we ask, fail to ask or never dream of asking." - Sue
                </p><br />
        
                <p>
                Imagine It! Coaching is a relationship designed to help you realize your potential and live your life to the fullest as created by you. Our process aims to close the gap between where you are now and you living the life of your dreams.
                </p><br />
                
                <p>
                The coaching relationship encompasses empowerment, awareness, growth, wellness and potential. Throughout the process, you are always at choice and in power.
                </p><br />
                <p>
                Imagine yourself:
                </p>
                <ul class="a">
                <li>-Creating greater awareness and living in the moment with a deep sense of appreciation.</li>
                <li>-Clearly defining what is truly important.</li>
                <li>-Setting goals and easily moving towards them.</li>
                <li>-Taking action in spite of fear.</li>
                <li>-Moving forward.</li>
                <li>-Discovering a sense of achievement and greater power.</li>
                <li>-Finding genuine happiness.</li>
                <li>-Handling the transitions of life with confidence and grace.</li>
                </ul>
        </div><!-- End of left part-->
        
        
        <div id="right_part">
        <a href="index.html"><img src="images/logo.jpg" alt="Professional Coaching" /></a>
    	<ul>
        <li><a href="#">Coaching</a></li>
        <li><a href="about.html">About Imagine It</a></li>
        <li><a href="#">Meet Sue</a></li>
        <li><a href="#">Testimonies</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>    
        </div><!-- End of right part-->
    
    <br clear="all" />
    
   <p class="copy">&copy;2010 Imagine It Coaching</p>
    
    
    </div><!-- End of wrapper-->

</div><!-- End of container-->

And here is the CSS:

*{ margin:0px; padding:0px;}
a img{ border:0px}
body{ background:url(images/bg.jpg) no-repeat center top; font-family: "Times New Roman", Times, serif; height:1100px}
#container{ margin:auto; width:960px;}

#wrapper{ background:url(images/page_bg.jpg); width:928px; height:766px; margin:149px 0 0 20px ; float:left; display:inline}
#wrapper_about{ background:url(images/page_bg.jpg); width:928px; height:766px; margin:149px 0 0 20px ; float:left; display:inline}
#left_part{ float:left; display:inline; width:520px; margin: 20px 0 0 59px}
.welcome{ margin:230px 0 0 10px}
#left_part p{ font-family:"Times New Roman", Times, serif; color:#000; font-size:18px; font-weight: normal; margin:10px 0 10px 0; padding:0 15px 0 0}
#left_part p b{ font-family: "Script MT Bold"; font-size:20px}
#left_part p q{ font-size:16px; float:center; display:inline; margin:0 90px 0 80px; padding:0 0 0 0}
.contact{ float:left; display:inline; margin:15px 0 0 75px}
#left_part_about{ float:left; display:inline; width:520px; margin: 230px 0 0 59px}
#left_part_about p{ font-family:"Times New Roman", Times, serif; color:#000; font-size:18px; font-weight: normal; padding:0 15px 0 0 margin:230px 0 0 0} 
#left_part_about ul{ text-align:left;}
.a{list-style-type:disc;}
#left_part_about ul li{ font-size:18px; margin: 4 0 10 0}
#right_part{ width:297px; float:right; display:inline}
#right_part ul{ float:right; text-align:right; margin:20px 35px 0 0}
#right_part ul li{ list-style:none;  font-size:26px; margin:5px 0 30px 0}
#right_part ul li a{ color:#fff; text-decoration:none;}

#load{ width:1px; height:1px; position: relative;}
.load{ position:absolute; top:114px; left:10px }

#load2{ width:1px; height:1px; position: relative;}
.load2{ position:absolute; top:664px; left:585px }

.copy{ float:right; display:inline; font-size:12px; color:#818181; margin:10px 20px 0 0}

[teedoff]

Have you tried not giving your ul a class and just style the <ul> itself tag with a list-style-type: disc;

unless of course you only want the list in THIS page only to display a disc.

[ko ko]

*{ margin:0px; padding:0px;} It removed all default margin and padding. You list-item has no margin and the bullet is not visible. Try to fill padding within the list-item to see the bullet.

ul.a {
     list-style: disc;
     margin: 0;
     padding: 0 0 0 20px;
}

Hope this help.

[RykeTech]

*{ margin:0px; padding:0px;} It removed all default margin and padding. You list-item has no margin and the bullet is not visible. Try to fill padding within the list-item to see the bullet.

ul.a {
     list-style: disc;
     margin: 0;
     padding: 0 0 0 20px;
}

Hope this help.

That corrected my bullet issue! Thank you much. Any idea how to stretch the image down?

[ko ko]

The current CSS version has no special property for stretching the background-image.