Guyz,  i know some of u will be disapointed in me cos of what am gona post for help here  (Yawa, pls dont skin me). reason being av been more into admin issues than web designs.
I'm having a real headache with my css here. imagine:

#mid {
height: auto;
width: 900px;
background: url(works/mid.png) repeat-y;
padding-left: 10px;

}


but the image wouldnt show up at all. I'm not sure if its the rest of ma css i used on the page thats cosin this wahala,  but usually, i dont face this kinda thing.

but if i make it

#mid {
height: 600px;
width: 900px;
background: url(works/mid.png) repeat-y;
padding-left: 10px;

}

it shows up to 600px height.
any help? i want auto collapse,  l'm sooo rusty.

In my experience the CSS height property doesnt see image set in the css background property as content and setting it to auto wont make it "grow" with the background pic.
You can use <img src="works/mid.png" alt="yada yada" /> in your html.

I dont understand your last statement sha, you want auto collapse. Please explain. I never chop well today so i'm rusty too, in my comprehension.

DC, by auto collapse, i mean, the img is a 2px height bg which i want to keep repeating for as long as the text on that DIV goes.
i'm not sure putting this in the html would solve this situation.

u get me now?

Ehn no wahala naw. Just be putting content, it will keep going down. The height doesnt know about the background. It only cares about the content in the div.

so if you have something like
<div id="mid"></div>

and u have
#mid {
height: auto;
width: 900px;
background: url(works/mid.png) repeat-y;
padding-left: 10px;

}


You wont see anything until u put content in the div like
<div id="mid"><p>where my money?</p></div>

DC wait naaa, neva ask for money, there's a mystery here, yes, the div is supposed to increase in height by default but i don put excess content for the thing, im no dey gree show at allllll, I'm completely sure i have em within d DIV. so where's d wahala coming from? but once i change the AUTO; to a number, say 500px; the bg img shows but as normal to the extent of 500px. WHY??

lol ok.

put this in your CSS

.clear { clear: both; }


then put this below the closing div in your html

<div class="clear"></div>


so it will be like

<div id="mid"><p>where my money?</p></div>
<div class="clear"></div>

for html


and

#mid {
   height: auto;
   width: 900px;
   background: url(works/mid.png) repeat-y;
   padding-left: 10px;

}
.clear { clear: both; }


for CSS

If this doesnt work, you go need drop your source codes here. both html and css.

hmmm, still isnt working. i tried the clear before now, didnt work, am pretty sure av offended the gods of css somewhere within the document.

Drop the full listing of your html and css here then. The gods must be crazy

================= CSS ==================

body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/main-bg.gif);
padding: 0;
margin: 0;
}

#container {
width: 900px;
height: auto;
margin: auto;
}

#bana {
height: 168px;
width: 900px;
background: url(works/bana.png) no-repeat;
padding-left: 8px;
}

#banadown {
height: 117px;
width: 900px;
background: url(works/banadown.png) no-repeat;
padding-left: 22px;
}

.clr { clear: both; }

#menu {
height: 34px;
width: 900px;
background: url(works/menu.png) no-repeat;
padding-left: 10px;

}

#mid {
height: auto;
width: 900px;
background: url(works/mid.png) repeat-y;
padding-left: 10px;

}

#mid-right {
height: auto;
width: 175px;
padding-right: 55px;
float: right;
font-size: 11px;
font: verdana;

}

.clear { clear: both; }

#news {
height: 16px;
width: 180px;
background-color: #990000;
color: #FFFFFF;
text-align:center;

}

#news2 {
height: 16px;
width: 180px;
background-color: #006699;
color: #FFFFFF;
text-align:center;

}

#mid-left {
height: auto;
width: 620px;
float: left;
padding-left: 10px;

}

#seconda {
width: 900px;
height: auto;
background: url(works/mid.png) repeat-y;
padding-left: 20px;

}
#footer {
height: 40px;
width: 900px;
background: url(works/bottom.png) no-repeat;
}

#footer2 {
height: 60px;
width: 900px;
font: verdana;
margin: auto;
text-align: center;
}




.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 600px%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}










=============== HTML =========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="Militant, rivers state, port harcourt, niger, niger delta, niger delter, Nigeria, dispute, kidnap, kidnapping, amnesty, cabinet change, free, change">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="South South Youth Leaders Forum is the mouthpiece of Niger Delta youths.">

<title>SOUTH SOUTH YOUTH LEADERS FORUM</title>

<link href="style.css" media="screen" rel="stylesheet"/>

<style>
a {text-decoration: none;
}

</style>



<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu */
}

.sexypanels li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}

.sexypanels li a{
background: #006699 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}

.sexypanels li a:visited, .sexypanels li a:active{
color: white;
}

.sexypanels li a:hover{
background-color: #990000; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
.style2 {font-size: 12px}
.style4 {color: #003399}
.style5 {
font-size: 12px;
color: #006699;
font-weight: bold;
}
</style>

<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->


</head>

<body>



<div id="container">
<div id="bana"></div>
<div id="menu">
<ul class="solidblockmenu">
<li><a href="index.php">HOME </a></li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="projects.php">PROJECTS</a></li>
<li><a href="articles.php">ARTICLES</a></li>
<li><a href="executives.php">EXECUTIVES</a></li>
<li><a href="forum.php">FORUM</a></li>
<li><a href="gallery.php">OUR GALLERY</a></li>
<li><a href="news.php">NEWS</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact.php">CONTACT US </a></li>

</ul>
<br style="clear: left" />



</div>

<div id="mid">
<div id="mid-left">
<p><img src="images/1.gif" alt="w" width="610" height="250" /></p>
<p align="justify" class="style2"><span class="style4"> </span></p>
<p align="justify" class="style5">We know you have matters bothering you. We know you have aggressions and there has been no way to make them known. This is why we are here. Forward us your matters. We shall get them live on our website for discussions, deliberations and also forward it to the necessary authorities.
<form name="contactformlite" method="post" action="lite_process.php" onSubmit="return validate.check(this)">
<table width="417" class="cflite">
<tr>
<td colspan="2">

</td>
</tr>
<tr>
<td width="143" valign="top" class="style2">
<label for="Full_Name" class="required">Full Name<span class="required_star style9"> * </span></label> </td>
<td width="262" valign="top" class="cflite_td">
<input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:250px">
</td>
</tr>
<tr>
<td valign="top" class="style2">
<label for="Email_Address" class="required">Email Address<span class="required_star style9"> * </span></label>
</td>
<td valign="top" class="cflite_td">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:250px">
</td>
</tr>
<tr>
<td valign="top" class="style2">
<label for="Telephone_Number" class="not-required">Telephone Number</label>
<span class="required_star style9">*</span></td>
<td valign="top" class="cflite_td">
<input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="100" style="width:250px">
</td>
</tr>
<tr>
<td valign="top" class="style2">
<label for="Your_Message" class="required">Your Message<span class="required_star style9"> *</span></label> </td>
<td valign="top" class="cflite_td">
<textarea style="width:250px;height:80px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" class="cflite_td">
<input type="submit" value="Submit"></td>
</tr>
</table>
</form>&nbsp;</p>
</div>

<!--LEFT SIDE ENDS-->
<?php include_once('right2.php'); ?>






<!--CLOSES MID--></div>

<div class="clr"></div>

<div id="footer"></div>

<div id="footer2">
<b>South South Youth Leaders Forum&nbsp; &copy; 2010 All rights resevered</b>
<p><a href="http://www.ipageng.com" target="_blank">An iPAGE SOLUTIONS' dESIGN</a>.</p>
</div>




</div>


</body>

</html>

@bug24
Please can you not repost your previous post.
Thanks for your anticipated cooperation.

Can you upload this page and show the link for us to see and understand as we don't have access to your picture files or you can present a graphical interface of what you want to achieve and what output you are getting presently. It is not a big deal to rectify such as I have always met such along my line of coding XHTML and CSS before.

Ran those codes. Its not clear to me exactly what you say is going wrong. The mid is like the sub container housing a left and right sidebar, i suppose. Or is it housing a left side bar and then content on the right? i.e. is <?php include_once('right2.php'); ?> your content or a right sidebar?

It is a simple problem. All u did was break one of the 'float' laws. One of the content of ur #mid i.e #mid-left is being floated left. If an element contains an element with a float property, the container elements height is set to null. So since #mid-left is floated left, ur #mid's height wont work.
There are 2 ways to the problem
1. Setting a height for ur #mid (the reason height:600px worked)
2. Floating #mid itself.
Therefore u should be looking into adding a float property to ur #mid i.e
#mid {
float: left;
width: 900px;
background: url(works/mid.png) repeat-y;
padding-left: 10px;

}
BTW, ur #mid-left does not need the height: auto property
Hope that helps.

kehers is right. I call it the great collapse and it happens when all the contents of a block element are floated.

this is my recommendation. Add this code after #mid-left closing tag (i.e after the tag that closes mid-left:
<div style="clear: both;"></div>
this will clear the float after #mid-left (thats why you have to put it after the closing tag for mid-left.
The only problem with this is that semanticists might frown at it because the div does not show any meaning (as in it just seems to be there, no content, nothing) but it does the job and is not harmless. So you could try this.

Please lets know if you get the problem solved with any of the suggestions

sorry guyz,  its not like i ran away. lol,  i got ma azz kicked for posting those line of codes. lol
i lost ma posting privileges. had to register this cloned ID. lol

waiting for Seun to restore me.

lemme try this suggestions, i'll be back to give either testimonies or complaints,  Thanks a milli

Bug your ID should be free now. He didn't come online all day yesterday, had to go through someone else.

Bug244, dont u think ur problem will require a one-on-one solution with another experienced person, it seems complex to understand and help online.

the problem is not complex and can be solved online. i'm sure the problem has already been solved

Me thinks bug was just high yesterday. It has cleared today and he musta fixed his problem.
Lesson: Dont drink and derive codes

lol!

AAAAAAHHHH, @KEHERS, ur too much, i chose the one of floating the #mid: left worked just fine, though it brought about anoda side effect like when you take chloroquine but i used piritine for it and its all ok.

jjjkkkooo:

Bug244, dont u think your problem will require a one-on-one solution with another experienced person, it seems complex to understand and help online.

The problem isnt complex, its all solved now. havnt u at anytime forgotten how to spell "hospital"? lol. that you'll ask the nearest person.

Thanks guyz, this's solved now. and thanks for not yabbin me.

my money nko

tsee hehehehe, ok , i go send u N100 recharge card. lol

I spent more than that chyking the babe that helped free ya id.

lol!!!! anikum!!!!!!

@DC serious assistant MOD. Back me up well once I'm not online here. Thanks a mil

^^ but Bug no wan gree pay for services rendered.
No wahala sha

img {
max-width : 100%;
}

by setting 100% max-width for all images, They will be rendered to their native with and height without exceeding their containing div

img {
max-width : 100%;
}

by setting 100% max-width for all images, They will be rendered to their native with and height without exceeding their containing div

@craziest, i dont realy pick ur point

^^then drop it like its hot.