DIV Problem: Overlapping

[opjjuly]

Hey guys, my DIVS are giving me a headache things is my .main div is overlapping with my .footer div , the .main div contains a table which expands when more rows are entered, so as its expanding it will overlap with the .footer div. Increasing its height to accommodate its expansion will just be awkward to the users. In short, how do i make a div shrink to its content? I have attached a screenshot of my problem. thanks in advance.

<div id="profile">
<?php $showSchedule = $db->query("SELECT * FROM schedule");?>
<div id="sideBar" align="center">
	<table>
	<form name="place">
	<tr><td>
	<h2>When?</h2>
	</td>
	</tr>
		<tr>
		<td>
		<select name="day">
		<?php while  ($row = mysql_fetch_array($showSchedule)) {
			echo "<option>$row[sc_day]</option>";}?>
		</select>
	</td>
	</tr>
	<tr>
	<td>
	<h2>What time?</h2>
	</td>
	</tr>
	<tr>
		<TD>
		<select name="time">
		<?php $showSchedule = $db->query("SELECT DISTINCT sc_workinghour FROM schedule");?>
		<?php while  ($row = mysql_fetch_array($showSchedule)) {
			echo "<option>$row[sc_workinghour]</option>";}?>
		</select>
		</TD>
		<td>
		<input type="submit" name="select" class="button" value="Select"/>
		</td>
	</tr>
	<tr>
		<TD>
		<?php echo $msg2;?>
		</TD>
	</tr>
	</form>
	</table>
		</div>

<div id="main">

<?php
		if (isset($_GET['success'])){
			echo "<font color='red'>Appointment has been made</font>";
		}
		else if (isset($_GET['error']) && $_GET['error'] == 1){
			echo "<font color='red'>Failed to make appointment. It has been made before</font>";
		}
	?>
	<table class="itemlist" name="item">
	<TR>
		<TH height="36">No</TH><TH>Name</TH><TH>Email</TH>
		<TH>Day</TH><TH>Office Hour</TH><TH>Check</TH>
	</TR>
	<form action="<?php $location?>" method="post" name="item">
	<?php
		
		if ($num_rows[0] > 0){
			$pages = new Paginator;
			$pages->items_total = $num_rows[0];
			$pages->mid_range = 7;
			$pages->paginate();
			$result = $db->query("SELECT * FROM consultant, schedule
								WHERE consultant.sc_id = schedule.sc_id
								AND schedule.sc_day = '$day'
								AND schedule.sc_workinghour = '$time'
								ORDER BY c_id ASC $pages->limit");
			echo $pages->display_items_per_page();
			echo "&nbsp;&nbsp;&nbsp;&nbsp;".$msg1;
			$no = 1;
			
			while  ($row = mysql_fetch_array($result)) {
				$ofid = $row['c_id'];
				$hour = $row["sc_workinghour"];
				$officer = $row["c_name"];
				$email = $row["c_email"];
				$day = $row["sc_day"];
										 
				echo "<TR onmouseover='hilite(this)' onmouseout='unlite(this)'>
				<TD>".$no."</TD><TD> ".$officer."</TD><TD> ".$email."</TD>
				<TD> ".$day. "</TD><TD> ".$hour."</TD>
				<TD> 
				<input type=\"checkbox\" onclick=\"chkcontrol($i)\" name=\"id\" value=\"".$ofid."\"/> 
				</TD>
				</TR>";
				$no = $no + 1;
				}
			}
		else{
				echo "<TR><TD>&nbsp;</td><TD>&nbsp;</td>
				<TD align=\"center\"><h2>$msg</h2>
				</TD></TR>";
		}
	
	?>
	<div class="butRight">
	<input type="submit" value="Submit" name="submit" class="button"/>
	</div>
	</form>
	</table>
</div>
</div>

<?php include('footer.php');?>
</div>
</body>
</html>

[simplypixie]

Not sure if I completely understand what you are trying to do but if you want the table to expand without expanding the containing div then you need to set a maximum height and hide the overflow in your main div:

#main {
height: 400px;  
overflow: hidden;
}

You can use

overflow: scroll;

instead if you want the user to be able to scroll in the main div to the bottom of the content (i.e. all the table rows that are hidden).