css and php - filling wrapper

[lauralee]

I have a problem with styling with css when using php to provide content for a web page. When using php to provide content to a web page, the wrapper does not expand to include all of the content unless there is simple html at the beginning and the end of the page. Otherwise the <div id="wrapper"> is there as seen by borders around the wrapper in order to see where it is, but it is empty. I use php to fill the entire page with information stored in a database. but, the resulting page does not have a white background behind the navigation box and the content box, but rather a dark purple as set in the body in css. I want the navigation box and the content box to be inside the wrapper so that the white background makes it appear seamless. A sample can be seen at www.ratonarts.org/about/test.php The css and php samples are:on the stylesheet:body {background:#16001a;}#wrapper{float:center;width:960px;background:#ffffff;text-align:center;color:#663300;padding:0;margin-left:auto;margin-right:auto;border:2px solid #006666;}#main {width:890px;text-align:left;background-color:#ffffff;color:#333333;margin:0;padding:5px;}#content {width:778px;float:right;background-color:#ffffff;color:#333333;margin:0;padding:5px;text-align:left;border-left:1px solid #16001a;}on the webpage:

<div id="wrapper"><div id="header"><?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/connection.inc.html.php'; ?><?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/magicq.inc.html.php'; ?><?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/hdr.inc.html.php'; ?></div><div id="navbox"><?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/navigation.inc.html.php'; ?></div><div id="content"><img class="fr" src="http://www.ratonarts.org/rac photos/oldpass.jpg" alt="Old Pass Gallery street side"></img><?php $sql = "SELECT PageTitle FROM WebsiteText WHERE Page='About' ORDER BY para_order";$result= @mysql_query ($sql); if (!result) {  $error = 'Error fetching page contents'; exit(); }  while ($row = @mysql_fetch_array($result)) { echo '<h1>' . $row['PageTitle'] . '</h1>';}$sql = "SELECT * FROM mission";$result= @mysql_query ($sql); if (!result) {  $error = 'Error fetching page contents'; exit(); }  while ($row = @mysql_fetch_array($result)) { echo '<h2>' . $row['title'] . '</h2>'; echo '<p><em>' . $row['statement'] . '</em></p>';}$sql = "SELECT Page, title, para, para_order FROM WebsiteText WHERE Page='About' ORDER BY para_order";$result= @mysql_query ($sql); if (!result) {  $error = 'Error fetching page contents'; exit(); }  while ($row = @mysql_fetch_array($result)) { echo '<h2>' . $row['title'] . '</h2><p>' . $row['para'] . '</p>';}$sql = "SELECT * FROM volunteers where type='staff' ORDER BY para_order";$result= @mysql_query ($sql); if (!result) {  $error = 'Error fetching page contents'; exit(); }  while ($row = @mysql_fetch_array($result)) { echo '<h3>' . $row['Title'] . '</h3>'; echo '<p><span class="bd">' . $row['Name'] . '</span> - <em>' . $row['position'] . '</em><br />' . $row['info'] . '</p>';}$sql = "SELECT * FROM volunteers where type='board' ORDER BY para_order";$result= @mysql_query ($sql); if (!result) {  $error = 'Error fetching page contents'; exit(); }  while ($row = @mysql_fetch_array($result)) { echo '<h3>' . $row['Title'] . '</h3>'; echo '<p><span class="bd">' . $row['Name'] . '</span> - <em>' . $row['position'] . '</em><br />' . $row['info'] . '</p>';}?></div></div></body></html>

[ShadowMage]

I assume you have a DTD (preferably Strict) and opening body and html tags. (You didn't post them in your code)Anyhow, there is no float: center; The only possible values for float are left, right, none, and inherit. If you're trying to center it try using margin: 0px auto; instead. Edit: I just noticed that you do have left and right margins set to auto, so just remove the float: center;Also, I noticed you have a floating div (your content div) inside the wrapper. That might be causing at least part of your problem. Try adding overflow: auto; to your wrapper div.

[lauralee]

Yes, I have the necessary DTD code. And, THANK YOU! Your suggestion of using overflow:auto did the trick!