Frustraing DIV / Height Problem

seaweed · March 10, 2009

Maybe I am just tired but I cannot find the cause of this error. Look at the bottom of my screenshot, the "wrap" DIV doesn't go all the way down. I've messed with the height of html, body and wrap. Any other ideas?

Validation at W3C finds an extra DIV tag on line 151 but it isn't there.

CSS

* {
/* Reset browsers default margin, padding and font sizes */
margin: 0;
padding: 0;
}

html {
height: 100%; 
margin-top: 20px;
padding-bottom: 20px;
}

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #000000;
background-color: #222222;
font-size: 10px;
text-align: center;
padding: 4px 0;
height: 100%;
margin-bottom: 20px;
}

h3 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
width: 770px;
text-align: left;
border-bottom: 1px solid #333366;
background-color: #CCCCFF;
padding-left: 2px;
}

.wrap {
    width: 800px;
    min-height: 800px;
    background-color: #cccccc;
margin-left: auto;
    margin-right: auto;
clear: both;
display: block;
}

.header {
    width: 792px;
    height: 85px;
    margin: 4px 4px 4px 4px;
    padding: 0;
    float: left;
background-color: #ffffff;
background-image: url('images/header.gif');
}

.navbar {
    width: 792px;
    height: 22px;
    margin: 0 4px 4px 4px;
    padding: 5px 0 0 0;
    float: left;
background-color: #333366;
color: #666699;
text-align: left;
}

a.navbarlink {
    color: #ffffff;
}

a.navbarlink:hover {
    color: #dcdcdc;
}

.panel {
    width: 772px;
height: 100%; 
    margin: 0 4px 0px 4px;
    padding: 30px 10px 10px 10px;
    float: left;
background-color: #ffffff;
color: #000000;
}

/* Project Features Panel */
.features {
    width: 772px;
min-height: 100px; 
background-color: #ffffff;
color: #000000;
float: left;
text-align: left;
margin-bottom: 10px;
}

/* Project Features Table */

.row {
    width: 772px;
height: 22px;
float: left;
border-bottom: solid 1px #000000;
clear: both;
}

.cell_id {
    width: 30px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_title {
    width: 300px;
height: 22px;
text-align: left;
display: inline;
float: left;
padding-left: 12px;
padding-top: 4px;
}

.cell_assigned_to {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_resource_estimate {
    width: 100px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_status {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_status_icon {
    width: 20px;
height: 22px;
text-align: center;
display: inline;
float: left;
padding-top: 4px;
}

.row_header {
    width: 772px;
height: 24px;
float: left;
border-bottom: solid 1px #000000;
clear: both;
font-weight: bold;
}

.cell_id_header {
    width: 30px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_title_header {
    width: 300px;
height: 22px;
text-align: left;
display: inline;
float: left;
font-weight: bold;
padding-left: 12px;
}

.cell_assigned_to_header {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_resource_estimate_header {
    width: 100px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_status_header {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_status_icon_header {
    width: 20px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.issues {
    width: 772px;
min-height: 100px;
background-color: #ffffff;
color: #000000;
float: left;
text-align: left;
margin-bottom: 10px;
}

.bugs {
    width: 772px;
min-height: 100px;
background-color: #ffffff;
color: #000000;
float: left;
text-align: left;
margin-bottom: 10px;
}

.browsers {
    width: 772px;
min-height: 100px;
background-color: #ffffff;
color: #000000;
float: left;
text-align: left;
margin-bottom: 10px;
}

.cell_browsers_icon_header {
    width: 30px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_id_header {
    width: 20px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_os_header {
    width: 300px;
height: 22px;
text-align: left;
display: inline;
float: left;
font-weight: bold;
padding-left: 12px;
}

.cell_browsers_browser_header {
    width: 100px;
height: 22px;
text-align: left;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_version_header {
    width: 50px;
height: 22px;
text-align: left;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_resolution_header {
    width: 50px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_assigned_to_header {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}


.cell_browsers_status_header {
    width: 250px;
height: 22px;
text-align: right;
display: inline;
float: left;
font-weight: bold;
}

.cell_browsers_icon {
    width: 30px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_id {
    width: 20px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_os {
    width: 300px;
height: 22px;
text-align: left;
display: inline;
float: left;
padding-top: 4px;
padding-left: 12px;
}

.cell_browsers_browser {
    width: 100px;
height: 22px;
text-align: left;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_version {
    width: 50px;
height: 22px;
text-align: left;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_resolution {
    width: 50px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_assigned_to {
    width: 150px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

.cell_browsers_status {
    width: 250px;
height: 22px;
text-align: right;
display: inline;
float: left;
padding-top: 4px;
}

HTML / PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <?php
    include 'config.php';
    include 'opendb.php';
  ?>
<HTML>
  <HEAD>
    <TITLE>PHP Project Tracker</TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <LINK rel="stylesheet" type="text/css" name="style" href="style.css">
    </HEAD>

    <BODY>
      <div class="wrap">
        <div class="header"></div>
        <div class="navbar">
             
	  <a href="home.php" class="navbarlink">Home</a>   |   
	  <a href="projects.php" class="navbarlink">Projects</a>   |   
	  <a href="tasklist.php" class="navbarlink">Task List</a>
	</div>
	<div class="panel">
	  <?php
	  // Start Features Panel //
		echo "
		<div class=\"features\">
		<h3>Feature Requests</h3><br />";

	  // Query features table //
		$features_result = mysql_query("SELECT * FROM features")
		or die(mysql_error());

		echo "
		<div class=\"row_header\">
		<div class=\"cell_status_icon_header\"></div>
		<div class=\"cell_id_header\">ID</div>
		<div class=\"cell_title_header\">Feature Description</div>
		<div class=\"cell_assigned_to_header\">Assigned To</div>
		<div class=\"cell_resource_estimate_header\">Time Est.</div>
		<div class=\"cell_status_header\">Status</div>
		</div>";

	  // Populate data rowsfor features //
		while($row = mysql_fetch_array( $features_result )) {

	  // Features field data //
		$phppt_features_status_icon = $row["phppt_features_status_icon"];
		$phppt_features_id = $row["phppt_features_id"];
		$phppt_features_title = $row["phppt_features_title"];
		$phppt_features_assigned_to = $row["phppt_features_assigned_to"];
		$phppt_features_status = $row["phppt_features_status"];
		$phppt_features_resource_estimate = $row["phppt_features_resource_estimate"];

		echo "
		<div class=\"row\">
		<div class=\"cell_status_icon\"><img src=\"images/$phppt_features_status_icon\" /></div>
		<div class=\"cell_id\">$phppt_features_id</div>
		<div class=\"cell_title\"><a href=\"feature.php&f=$phppt_features_id\">$phppt_features_title</a></div>
		<div class=\"cell_assigned_to\">$phppt_features_assigned_to</div>
		<div class=\"cell_resource_estimate\">$phppt_features_resource_estimate</div>
		<div class=\"cell_status\">$phppt_features_status</div>
		</div>";
		}
		echo "</div>";

      //End Features Panel //

	  //Start Bugs Panel //
		echo "
		<div class=\"bugs\">
		<br /><br /><br /><br />
		<h3>Bug Tracker</h3><br />";

	  // Query bugs table //
		$bugs_result = mysql_query("SELECT * FROM bugs")
		or die(mysql_error());

		echo "
		<div class=\"row_header\">
		<div class=\"cell_status_icon_header\"></div>
		<div class=\"cell_id_header\">ID</div>
		<div class=\"cell_title_header\">Bug Description</div>
		<div class=\"cell_assigned_to_header\">Assigned To</div>
		<div class=\"cell_resource_estimate_header\">Time Est.</div>
		<div class=\"cell_status_header\">Status</div>
		</div>";

	  // Populate data rows for bugs//
		while($row = mysql_fetch_array( $bugs_result )) {

	  // bugs table fields //
		$phppt_bugs_status_icon = $row["phppt_bugs_status_icon"];
		$phppt_bugs_id = $row["phppt_bugs_id"];
		$phppt_bugs_title = $row["phppt_bugs_title"];
		$phppt_bugs_assigned_to = $row["phppt_bugs_assigned_to"];
		$phppt_bugs_status = $row["phppt_bugs_status"];
		$phppt_bugs_resource_estimate = $row["phppt_bugs_resource_estimate"];

		echo "
		<div class=\"row\">
		<div class=\"cell_status_icon\"><img src=\"images/$phppt_bugs_status_icon\" /></div>
		<div class=\"cell_id\">$phppt_bugs_id</div>
		<div class=\"cell_title\"><a href=\"bug.php&b=$phppt_bugs_id\">$phppt_bugs_title</a></div>
		<div class=\"cell_assigned_to\">$phppt_bugs_assigned_to</div>
		<div class=\"cell_resource_estimate\">$phppt_bugs_resource_estimate</div>
		<div class=\"cell_status\">$phppt_bugs_status</div>
		</div>";
		}
		echo "</div>";

	  // End Bugs Panel //

	  // Start Issues Panel //
		echo "
		<div class=\"issues\">
		<br /><br /><br /><br />
		<h3>Uncategorized Issues</h3><br />";

	  // Query issues table //
		$issues_result = mysql_query("SELECT * FROM issues")
		or die(mysql_error());

		echo "
		<div class=\"row_header\">
		<div class=\"cell_status_icon_header\"></div>
		<div class=\"cell_id_header\">ID</div>
		<div class=\"cell_title_header\">Issue Description</div>
		<div class=\"cell_assigned_to_header\">Assigned To</div>
		<div class=\"cell_resource_estimate_header\">Time Est.</div>
		<div class=\"cell_status_header\">Status</div>
		</div>";

	  // Populate data rows for issues //
		while($row = mysql_fetch_array( $issues_result )) {

		// issues table fields //
		$phppt_issues_status_icon = $row["phppt_issues_status_icon"];
		$phppt_issues_id = $row["phppt_issues_id"];
		$phppt_issues_title = $row["phppt_issues_title"];
		$phppt_issues_assigned_to = $row["phppt_issues_assigned_to"];
		$phppt_issues_status = $row["phppt_issues_status"];
		$phppt_issues_resource_estimate = $row["phppt_issues_resource_estimate"];

		echo "
		<div class=\"row\">
		<div class=\"cell_status_icon\"><img src=\"images/$phppt_issues_status_icon\" /></div>
		<div class=\"cell_id\">$phppt_issues_id</div>
		<div class=\"cell_title\"><a href=\"issues.php&i=$phppt_issues_id\">$phppt_issues_title</a></div>
		<div class=\"cell_assigned_to\">$phppt_issues_assigned_to</div>
		<div class=\"cell_resource_estimate\">$phppt_issues_resource_estimate</div>
		<div class=\"cell_status\">$phppt_issues_status</div>
		</div>";
		}
		echo "</div>";

		// Start Browsers Panel //
		echo "
		<div class=\"browsers\">
		<br /><br /><br /><br />
		<h3>Browser Compatibility</h3><br />";

	  // Query browsers table //
		$browsers_result = mysql_query("SELECT * FROM browsers")
		or die(mysql_error());

		echo "
		<div class=\"row_header\">
		<div class=\"cell_browsers_icon_header\"></div>
		<div class=\"cell_browsers_id_header\">ID</div>
		<div class=\"cell_browsers_os_header\">Operating System</div>
		<div class=\"cell_browsers_assigned_to_header\">Assigned To</div>
		<div class=\"cell_browsers_status_header\">Status</div>
		</div>";

	  // Populate data rows for browsers
		while($row = mysql_fetch_array( $browsers_result )) {

	  // browsers table fields //
		$phppt_browsers_status_icon = $row["phppt_browsers_status_icon"];
		$phppt_browsers_id = $row["phppt_browsers_id"];
		$phppt_browsers_os = $row["phppt_browsers_os"];
		$phppt_browsers_browser = $row["phppt_browsers_browser"];
		$phppt_browsers_version = $row["phppt_browsers_browser_version"];
		$phppt_browsers_resolution = $row["phppt_browsers_resolution"];
		$phppt_browsers_assigned_to = $row["phppt_browsers_assigned_to"];
		$phppt_browsers_status = $row["phppt_browsers_status"];

		echo "
		<div class=\"row\">
		<div class=\"cell_browsers_icon\"><img src=\"images/$phppt_browsers_status_icon\" /></div>
		<div class=\"cell_browsers_id\"><a href=\"browser.php&v=$phppt_browsers_id\">$phppt_browsers_id</a></div>
		<div class=\"cell_browsers_os\">$phppt_browsers_os / $phppt_browsers_browser $phppt_browsers_version / $phppt_browsers_resolution</div>
		<div class=\"cell_browsers_assigned_to\">$phppt_browsers_assigned_to</div>
		<div class=\"cell_browsers_status\">$phppt_browsers_status</div>
		</div>";
		}
		echo "</div>";
	?>

	  <?php mysql_close($con); ?>
    </div>
  </div>
    </BODY>
</HTML>

seaweed · March 11, 2009

Anyone?

racer x · March 11, 2009

In many of the sections I see an opening

<div> followed by a group of same line

</div>

But then I don't get the echo </div> after some of the sections? (Or did I miss that those were if/then statements? oops)

You should try adding a div after the php close statement where you clear the floats. That's probably the problem.

<?php mysql_close......

</div>

CSS...

.clear {

clear:both;

}

xylex · March 11, 2009

Can you share the rendered HTML?

seaweed · March 11, 2009

http://whobrokemyworld.com/phppt/project.php

I set the .bugs class to min-height: 300px; to recreate the effect. Basically once the page reaches 100% screen height it does this. Does it do it on giant high-res monitors? I only have a 19" here at home.

seaweed · March 11, 2009

In many of the sections I see an opening

<div> followed by a group of same line

<div>(info)</div>

</div>

But then I don't get the echo </div> after some of the sections? (Or did I miss that those were if/then statements? oops)

Which lines do you mean?

You should try adding a div after the php close statement where you clear the floats. That's probably the problem.

<?php mysql_close......

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

</div>

</div>

CSS...

.clear {

clear:both;

}

This did not help, but thanks!

racer x · March 11, 2009

<div class=\"cell_browsers_assigned_to\">$phppt_browsers_assigned_to</div>

<div class=\"cell_browsers_status\">$phppt_browsers_status</div>

</div>";

}

echo "</div>"; <-- not sure what this closes?

Also, you have float:left AND clear:both in the "row" class.

A clear should be in it's own div.

xylex · March 11, 2009

Kill the float:left; on .panel, no need for it there and float doesn't cause the parent div to expand without a clear div like racer x said.

haku · March 11, 2009

add:

overflow:auto;

to the containing element (div)

seaweed · March 11, 2009

Okay, that almost worked but there's still no "wrap" past the bottom. Where should I use the <div class="clear"></div> tags, after each "row"?

seaweed · March 11, 2009

<div class=\"cell_browsers_assigned_to\">$phppt_browsers_assigned_to</div>

<div class=\"cell_browsers_status\">$phppt_browsers_status</div>

</div>";

}

echo "</div>"; <-- not sure what this closes?

It closes <div "browsers">... each section has its own little panel container.

haku · March 11, 2009

Okay, that almost worked but there's still no "wrap" past the bottom.

The containing element probably just needs a little bottom padding.

racer x · March 11, 2009

OK. I see that now, sorry.

Did you try the clear between the final closing div or the wrap and panel. I probably should have said that.

I just always assume any time there are elements that "escape" outside a parent div(your wrap div), it is usually due to floated or absolute positioned(etc.) items since those are removed of the normal flow of the document.

I don't think adding padding will make any difference.

haku · March 11, 2009

I just always assume any time there are elements that "escape" outside a parent div(your wrap div), it is usually due to floated or absolute positioned(etc.) items since those are removed of the normal flow of the document.

You are right on that, which is why I said to do this:

add:
overflow:auto;
to the containing element (div)

Which solves the problem without using un-needed extra markup that is added by doing this:

you should try adding a div after the php close statement where you clear the floats.

And also means that this:

The containing element probably just needs a little bottom padding.

Should work, as long as he has no other errors in his code.

The whole point of this post being that this:

I don't think adding padding will make any difference.

Is wrong, as adding the padding will in fact fix the situation if he uses the code I gave earlier, and he also has no errors in his code that conflict. I have used the technique a number of times. If you want to see it at work, run the code below. You can see the bottom padding in the blue div, and there are no unnecessary clearing divs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-us" xml:lang="en-us">
<head>
<title>untitled</title>
<style type="text/css">
#d1
{
  width:20%;
  float:left;
  background-color:red;
  height: 500px;
}
#d2
{
  width:40%;
  float:left;
  background-color:green;
  height:500px;
}
#container
{
  background-color:blue;
  overflow:auto;
padding-bottom:10px;	
}
</style>
</head>
<body>
<div id="container">
<div id="d1">test</div>
<div id="d2">test</div>
</div>
</body>
</html>

seaweed · March 11, 2009

Seems to be fixed, using the final clear tag and adding the padding worked. Thanks guys. My php is better than my css

Now, time to go back and clean up my php!

racer x · March 11, 2009

Well haku, that is a very valid point. The original poster wasn't indicating of switching to your method which is why I suggested that the padding wasn't going to help, I probably should have made that point clearer.

At any rate, I did not mean that as an insulting comment toward yourself or your suggestion(hence your giant post), I was just trying to help.

Sign In

Frustraing DIV / Height Problem

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information