www.webdeveloper.com
Results 1 to 5 of 5

Thread: Height is not adjusting to content placed within

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    2

    Height is not adjusting to content placed within

    Alright so, here is this page:
    http://thepilotsworld.com/article.php?newsid=2

    As you can see there, the white background height isn't adjusting to the content placed within.
    I've tried several things to fix this.
    So here's the style:

    HTML Code:
    @charset "utf-8";
    /* CSS Document */
    
    body
    {
    	background:url(images/1600x1200.jpg)
    }
    #wrapper
    {
    	width: 950px;
    	height: auto;
    	margin: 0 auto;
    	-moz-box-shadow: 0 0 5px 5px #888;
    	-webkit-box-shadow: 0 0 5px 5px#888;
    	box-shadow: 0 0 5px 5px #888;
    }
    #header
    {
    	width: 950px;
    	height: 200px;
    	background:url(images/banner.png);
    	margin: 0 auto;
    }
    #mainContent
    {
    	width: 950px;
    	min-height: 600px;
    	height:auto;
    	background-color:#FFF;
    	margin-top: -20px;
    
    }
    .message {
    font-family: "Trebuchet MS", Tahoma, Helvetica;
    font-size: 12px;
    }
    hr {
    	width:920px;
    	background: #fff;
    	border: 0;
    	margin: 0px;
    	border-bottom: 1px solid #e3e1d9;
    }
    .header {
    font-size: 12px;
    padding: 15px;
    width: 900px;
    float: left;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: left;
    }
    .title {
    font-family: "Trebuchet MS", Tahoma, Helvetica;
    color: #423F44;
    font-size: 25px;
    padding-bottom: 6px;
    }
    a img { border:0 }
    a:hover { color: #999; }
    a { color: #666; }
    .CommentHeader {
    padding: 15px;
    width: 890px;
    float: left;
    text-align: left;
    background-color:#D3D3D3;
    margin-left:15px;
    opacity:0.5;
    min-height:51px;
    }
    .CommentAuthor {
    font-family: "Trebuchet MS", Tahoma, Helvetica;
    color: #333;
    font-size: 15px;
    text-shadow:0 1px 0 #666;
    }
    .CommentMessage {
    font-family: "Trebuchet MS", Tahoma, Helvetica;
    color: #333;
    font-size: 15px;
    }
    .button {
    	border: 1px solid #ccc;
    	background: #ddd;
    	font-family: "Trebuchet MS", Tahoma, Helvetica;
    	color: #222;
    	font-size: 12px;
    	text-decoration:none;
    }
    And here is the page:
    PHP Code:
    <?php session_start(); 
     
    ?>
     <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    <meta charset="utf-8">
    <title>The Pilot's World</title>

    </head>
    <body>
    <?php include("head.php"); ?>
    <div id="mainContent">
    <center>
    <?php
    $host
    ="*******"// Host name 
    $username="*********"// Mysql username 
    $password="**********"// Mysql password 
    $db_name="************"// Database name 
    $tbl_name="news"// Table name
    mysql_connect("$host""$username""$password")or die("cannot connect"); 
    mysql_select_db("$db_name")or die("cannot select DB");   
    $activenews $_GET['newsid'];
    $activenews stripslashes($activenews);
    $activenews mysql_real_escape_string($activenews);
    $result mysql_query("SELECT * FROM $tbl_name WHERE id='$activenews'");
    $count mysql_num_rows($result);
    while(
    $row mysql_fetch_array($result)){
    $count mysql_num_rows($result);
          echo 
    "<div class='header'>";
        
            echo 
    "<div class='title'>".$row['title']."</div>
            Published on <a href='#'>"
    .date('jS \o\f F, Y'$row['date'])."</a> by <a href='user.php?user="$row['author']."'>"$row['author']."</a><br><br><hr><br>";
            echo 
    "<div class='message'>".$row['message']."</div><br><br><hr><br>";
          echo 
    "</div>";
          if (
    $count == 0){
             echo 
    "<center><p>News not found!</p><p>&nbsp;</p></center>";
          }
    }
    $result mysql_query("SELECT * FROM newscomments WHERE newsid = '$activenews' ORDER BY date DESC");
    $even 1;
    while(
    $row mysql_fetch_array($result))
    {
        if(
    $even == 1)
        {
            echo 
    "<div class='CommentHeader'>";
            echo 
    "<div class='CommentAuthor'>".$row['author'].":</div><br />";
            echo 
    "<div class='CommentMessage'>".$row['message']."</div></div>";
            
    $even 0;
        }
        else 
        {
        if(
    $even == 0)
        {
            echo 
    "<div class='CommentHeader' style='background-color:#F5F5F5'>";
            echo 
    "<div class='CommentAuthor'>".$row['author'].":</div><br />";
            echo 
    "<div class='CommentMessage'>".$row['message']."</div></div>";
            
    $even 1;
        }
        }
        
    }
    if(isset(
    $_POST['comment']))
    {
        
    $comment stripslashes($_POST['comment']);
        
    $comment mysql_real_escape_string($comment);
        
    $timestamp time();
        
    mysql_query("INSERT INTO newscomments (newsid,author,message,date) VALUES ('$activenews','".$_SESSION['myusername']."','$comment','$timestamp')");

    }
    if(isset(
    $_SESSION['myusername']))
    {
        if(
    $even == 1)
        {
            echo 
    "<div class='CommentHeader'>Post a comment:";
            echo 
    "<form action='article.php?newsid=$activenews' method='post'>
                  <input type='text' name='comment'>
                  <input type='submit' value='Post' class='button'>"
    ;
            echo 
    "</form></div>";
            
    $even 0;
        }
        else 
        {
        if(
    $even == 0)
        {
            echo 
    "<div class='CommentHeader' style='background-color:#F5F5F5'>Post a comment:";
            echo 
    "<form action='article.php?newsid=$activenews' method='post'>
                  <input type='text' name='comment'>
                  <input type='submit' value='Post' class='button'>"
    ;
            echo 
    "</form></div>";
            
    $even 1;
        }
        }
    }
    echo 
    "<br>";
    ?>
    </center>
    </div>
    <div id="footer">
    </div>
    </body>
    </html>
    So does anyone have a clue WHY this is happening.
    I also have another page, where the height DOES adjust. And I already tried replacing the HTML stuff from that page into this one but no luck.

    Yours sincerely,
    Kevin Houghton

    PS. I'm new here, I'm sorry if I've placed this in the wrong section.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    Hi there

    and a warm welcome to these forums.

    Change this...
    Code:
    
    #mainContent {
    	width: 950px;
    	min-height: 600px;
    	height:auto;
    	background-color:#FFF;
    	margin-top: -20px;
    }
    ...to this...
    Code:
    
    #mainContent {
    	width: 950px;
    	min-height: 600px;
    	overflow:hidden;
    	background-color:#FFF;
    	margin-top: -20px;
    }
    Further reading



    coothead

  3. #3
    Join Date
    May 2013
    Posts
    2
    Wow, that was a fast and a great reply! Thank you very much it is working now.

    Kevin

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    No problem, you're very welcome.


    coothead

  5. #5
    Join Date
    Feb 2013
    Location
    USA
    Posts
    40
    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles