• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • Last Modified:

Using DIV Tag to display dynamic result on a Page

Hi All,
I have the contents of a query appearing inside a Div Tag. The only problem is that when the query returns a large amount of information the Div Tag extents but the information underneath the Div Tag is now displayed underneath it and does not allow room for the extented Div Tag. How can I make it so that if the Div Tag is required to be extended, the rest of the contents of the page are corresponding shifted underneath it. I'm using Dreamweaver 8 by the way.
Thanks,
Derek
0
dereksheahan
Asked:
dereksheahan
  • 7
  • 6
1 Solution
 
RouchieCommented:
It sounds like you need to clear the DIV.  Try this

<div>
  database results here
     <div style="clear:both;">&nbsp;</div>
</div>
<div style="clear:both;">&nbsp;</div>
0
 
Jason C. LevineNo oneCommented:
Derek,

You can also set the div to overflow: scroll which will keep it at the size you define but add scrollbars for the rest of the content.
0
 
dereksheahanAuthor Commented:
Hi guys,
I tried the ( <div style="clear:both;">&nbsp;</div>) solution but that doesn't seem to work. I can set the overflow to scroll but that doesn't look ideal for what I want. What I'd really like is for the div tag to expand based on the amount of entries from the database. At the moment it expands the div tag over the tag underneath it. I've also ticked the "prevent overlaps" in  the CSS layers panel but that only seems to apply to actually drawing the layers not when the page is loaded is the browser? Here's the code to the page if it helps.
Thanks a mil

<?php require_once('../Connections/GSM_mobile.php'); ?>
<?php
$colname_rsPostalResults = "-1";
if (isset($_GET['postal_variable'])) {
  $colname_rsPostalResults = (get_magic_quotes_gpc()) ? $_GET['postal_variable'] : addslashes($_GET['postal_variable']);
}
mysql_select_db($database_GSM_mobile, $GSM_mobile);
$query_rsPostalResults = sprintf("SELECT mod_model_id, mod_model_name, mod_type_id FROM model_table WHERE mod_type_id = %s", $colname_rsPostalResults);
$rsPostalResults = mysql_query($query_rsPostalResults, $GSM_mobile) or die(mysql_error());
$row_rsPostalResults = mysql_fetch_assoc($rsPostalResults);
$totalRows_rsPostalResults = mysql_num_rows($rsPostalResults);
?><!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #993333}
.style3 {color: #000000}
#Layer1 {
      position:absolute;
      left:12px;
      top:112px;
      width:417px;
      height:132px;
      z-index:1;
      overflow: auto;
}
#Layer1 {
      border: thin dotted #333333;
}
Pos {
      overflow: visible;
}
#Layer2 {
      position:absolute;
      left:9px;
      top:258px;
      width:683px;
      height:120px;
      z-index:2;
}
-->
</style>
</head>

<body>
<div id="Layer1">
  <p><span class="style1 style2">
    <?php do { ?>
    <span class="style3"><?php echo $row_rsPostalResults['mod_model_name']; ?></span>
    <?php } while ($row_rsPostalResults = mysql_fetch_assoc($rsPostalResults)); ?>
  </span></p>
</div>

<div id="Layer2">
  <p><a href="postalmain.php">Search again </a></p>
  <p>If your phone model is not listed then please <a href="../support.php">contact us</a> to make sure we can unlock your phone before sending.</p>
  <p>If your phone is listed then please complete this <a href="../Files/postal unlocking form.doc">contact form</a></p>
</div>
<form id="form1" name="form1" method="post" action="">
  <p>The following is a list of models that we support:</p>
  <p>Image of Brand Type: </p>
  <p>&nbsp;</p>
  <p class="style1 style2">&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>
</body>
</html>
<?php
mysql_free_result($rsPostalResults);
?>
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Jason C. LevineNo oneCommented:
Derek,

Don't define a height for that div.  Let the content push the border.
0
 
dereksheahanAuthor Commented:
Hi Jason,
Changed the height to "auto" and tryed the "clear" property and all of its options (left,right,both,none). Still the div tag undeneath stays there and is overrun by the text in this div tag
0
 
Jason C. LevineNo oneCommented:
Okay, great.

Give me a few minutes to play with the file and I will post revised code that pushes the second div.
0
 
Jason C. LevineNo oneCommented:
<?php require_once('../Connections/GSM_mobile.php'); ?>
<?php
$colname_rsPostalResults = "-1";
if (isset($_GET['postal_variable'])) {
  $colname_rsPostalResults = (get_magic_quotes_gpc()) ? $_GET['postal_variable'] : addslashes($_GET['postal_variable']);
}
mysql_select_db($database_GSM_mobile, $GSM_mobile);
$query_rsPostalResults = sprintf("SELECT mod_model_id, mod_model_name, mod_type_id FROM model_table WHERE mod_type_id = %s", $colname_rsPostalResults);
$rsPostalResults = mysql_query($query_rsPostalResults, $GSM_mobile) or die(mysql_error());
$row_rsPostalResults = mysql_fetch_assoc($rsPostalResults);
$totalRows_rsPostalResults = mysql_num_rows($rsPostalResults);
?><!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #993333}
.style3 {color: #000000}
#Layer1 {
     left:12px;
     top:112px;
     width:417px;
     height:auto;
     z-index:1;
}
#Layer1 {
     border: thin dotted #333333;
}
Pos {
     overflow: visible;
}
#Layer2 {
      width:683px;
      clear: both;
      float: none;
}
-->
</style>
</head>

<body>

<div id="Layer1">
  <p><span class="style1 style2">
    <?php do { ?>
    <span class="style3"><?php echo $row_rsPostalResults['mod_model_name']; ?></span>
    <?php } while ($row_rsPostalResults = mysql_fetch_assoc($rsPostalResults)); ?>
  </span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
<div id="Layer2">
  <p><a href="postalmain.php">Search again </a></p>
  <p>If your phone model is not listed then please <a href="../support.php">contact us</a> to make sure we can unlock your phone before sending.</p>
  <p>If your phone is listed then please complete this <a href="../Files/postal unlocking form.doc">contact form</a></p>
</div>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>The following is a list of models that we support:</p>
    <p>Image of Brand Type: </p>
    <p>&nbsp;</p>
    <p class="style1 style2">&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </form>
</div>
</body>
</html>
<?php
mysql_free_result($rsPostalResults);
?>
0
 
dereksheahanAuthor Commented:
Jason your a legend! That works great. Just one question, the handlers for the div tags seem to have disappeared! Is it because you have set "float" to none. How do I get them back if I need to resize things?
0
 
dereksheahanAuthor Commented:
For example, I need a title above the display section but can't seem to make space for it. Is it because the positions of the Div Tags have been make absolute?
Thanks,
D
0
 
Jason C. LevineNo oneCommented:
No, nothing is absolute anymore.  You can't make a div absolute and also ask it to resize based on content.

To make room above or below something, add a new div tag and create a new class to handle it.  The major attributes to make this work correctly are:

clear: both;
float: none;

You can set anything else you like (margins: auto, width: auto or 100%) to make the layout work.
0
 
dereksheahanAuthor Commented:
Thanks
0
 
Jason C. LevineNo oneCommented:
You're welcome.

Derek,  you should take a look at oswd.org when you have some free time.   It's a great place to learn about CSS
0
 
dereksheahanAuthor Commented:
Thanks Jason, Still working on that scroller section at the moment though. Reverted back to marquee and think I nearly have it in order :)
0
 
Jason C. LevineNo oneCommented:
LOL.  Oh well.  There is a javascript out there that will do what you want, it's just a matter of finding it.  Heck, you should post the challenge in the JS forum here...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now