Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Floated Div tag extending beyond container div

    Having an issue clearing a floated div tag.

    http://ghosthuntersportal.com/index.php

    The block of "test" text should force the content portion of the site to extend lower so it's border is wrapping that block of text. I've put clear: both every I can think of, but still no luck. Anybody seeing something I'm not?

    Thanks.

    Code:
    <?php
    
    $date_index="5/1/2011";
    $year = date(Y);
    if($year!="2011"){
    $copyrightdate="- ".$year."";
    }
    $page="index";
    include 'pages.php';
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head>
    <base href="http://ghosthuntersportal.com/" />
    <title>Ghost Hunter's Portal <?php echo "$title_section"; ?></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="verify-v1" content="" />
    <meta name="keywords" content="ghost, hunters, hunter, ghosts, spirit, spirits, paranormal, investigation, investigator, investigators, k2, emf, meter, kii" />
    <meta name="description" content="Ghost Hunters Potal. Parnormal research equipment store." />
    <meta name="author" content="Andrew McCarrick" />
    <meta name="robots" content="index, follow" />
    
    <?php
    if($_GET['donate']=="thankyou"){
    echo '<meta http-equiv="refresh" content="5;url=http://makethemoviehappen.com/index.php">';
    }
    elseif($_GET['donate']=="cancel"){
    echo '<meta http-equiv="refresh" content="1;url=http://makethemoviehappen.com/index.php">';
    }
    else{
    }
    ?>
    <style type="text/css">
    <?php
    if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 7")) {
    echo 'body {background-color: #000000; color: #FFFFFF; font-family: Tahoma; margin-top: 10px;
    margin-right:auto;margin-left:auto;max-width:1000px;}';
    } else {
    echo 'body {background-color: #000000; color: #FFFFFF; font-family: Verdana; margin-top: 10px;
    margin-right:auto;margin-left:auto;max-width:1000px;}'; 
    }
    ?>
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div class="header">
    <div class="logo"><img src="./logo.png" alt="Ghost Hunter's Portal" /></div>
    <div class="tag"><img src="./tag.png" alt="Ghost Hunter's Portal" /></div>
    <div class="header_right">
    <div class="ad">
    
    </div>
    <div class="header_links">
    Home | View Cart | Returns | About Us | Contact Us
    </div>
    </div>
    </div>
    <div class="content_wrapper">
    <div class="links">
    <div class="bold spacer3">Categories</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    </div>
    <div class="main">
    <div class="search">
    &nbsp;
    </div>
    <div class="content">
    TestTestT estTestTestTestTestTestTestTes tTestTestTestTestTestTestTestTes tTestTestTestTestTestTestT estTestTestTestTestTestTestTestTest 
    TestTestTes tTestTestTestTestTestTestTe stTestTestTestTestTestTest TestTestTestTestTestTestTestTe stTestTestTes 
     TestTestTestTestTes tTestTestTestTestTestTestTestTest TestTestTestTestTestTestT estTestTestTest TestTestTest TestTestTest 
     TestTestTestTestTestTestTestTe stTestTestTestTestTestT estTestTestTestT estTestTestTe stTestTestTestT estTestTestTes tTestTestT 
     estTestTestTestTestTe stTestTestTestTe stTestTestTestT estTestTestTes tTestTestTestTestTestTestTestTestTest TestTest
     TestTestTestTestTes tTestTestTes tTestTestTestTestTestTest TestTestTestTestTestTest TestTestTestTestTest TestTest
     TestTestTestTestTestTest TestTestTestTestTest TestTestTestTestTest TestTestTestTestTest TestTestTestTestTest TestTest
     TestTestTestTestTestTestTestTestTestTestTestTestTest TestTestTestT estTestTestTestTestTestTestTestT estTestTest
     TestTestTestTestTest TestTestTestTe stTestTestT estTes t TestTestTest TestTestTestTe stTestTestTe stTestTestTest 
     TestTestTestTes tTestTestTestTestTestTest TestTestTestTestTestTe stTestTestTestTestTestT estTestTestTestTes tTest
     TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
     TestTestTestTestT estTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
     TestTestTestTestTestTestTestTestTestTestTestTestTestTestTes tTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
     TestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestT estTestTestTestTestTestTestTestTestTestTest
     TestTestTestTestTestTestTestTestTestTestTestTestTestTestT estTestTestTestTestTestTestTestTestTest TestTestTestTestTestTestTestTest
     TestTestTestTestTestTestTestT estTestTestT estTestTestTestTestTestTestTestTestTestTestTestTestTest TestTestTestTestTestTestTestTestTest
     TestTestTestTestTest TestTestTestTestTestTestTestTestTes tTestTestTestTestTestTestTestTestTestTestTes tTestTestTestTestTestTestTestTest
     TestTestTestTestT estTestTestTestTestTestTestTestTestTestTestTestTestTes tTestTestTestTestTestTest TestTestTestTestTestTestTestTestTest
     TestTestTestTest TestTestTestTestTestTest TestTestTest TestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTest
     TestTestTestTestTest TestTestTestTestTestTestTes tTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTest
     TestTestTestTestTestT estTestTestTestTestT estTestTestTestTestTestTestTestTestTestTes tTestTestTestTestTestTestTest
     TestTestTestTestTestT estTestTestTestTestTestTestTestTest
    <? echo $content; ?>
    </div>
    </div>
    <div class="footer">
    &copy; 2011 <?php echo $copyrightdate; ?> Andrew McCarrick (Designed by: Andrew McCarrick)
    </div>
    </body>
    </html>
    Code:
    a:link {color: #0000FF;}
    a:visited {color: #0000FF;}
    a:active {color: #0000FF;}
    a:hover {color: #0000FF;}
    
    a.back:link {text-decoration: none; color: #0000FF;}
    a.back:visited {text-decoration: none; color: #0000FF;}
    a.back:active {text-decoration: none; color: #0000FF;}
    a.back:hover {text-decoration: none; color: #0000FF;}
    
    .wrapper{
    width: 995px;
    border: 2px;
    border-color: #CD0000;
    margin-left: 2px;
    border-style: solid
    }
    
    .header{
    width: 999px;
    height: 75px;
    border: 2px;
    border-color: #660066;
    border-style: none;
    border-bottom-style: solid;
    }
    
    .logo{
    float: left;
    margin-top: -12px;
    margin-left: -3px;
    height: 76px;
    width: 460px;
    }
    
    .tag{
    float: left;
    margin-top: 40px;
    margin-left: -453px;
    height: 35px;
    width: 460px;
    }
    
    .header_right{
    width: 530px;
    height: 74px;
    float: left;
    }
    
    .header_links{
    width: 375px;
    height: 16px;
    text-align: right;
    font-size: 14px;
    margin-left: 148px;
    }
    
    .ad{
    margin-left: 148px;
    width: 375px;
    height: 52px;
    text-align: center;
    }
    
    .adposition{
    }
    
    .adspacer{
    }
    .adspacer2{
    }
    
    .content_wrapper{
    width: 995px;
    height: 100%;
    min-height: 530px;
    border: 2px;
    border-color: #660066;
    border-style: solid;
    border-top-style: none;
    }
    
    .spacer3{
    margin-top: -10px;
    margin-bottom: 3px;
    }
    
    .links{
    margin-top: 15px;
    float: left;
    clear: both;
    width: 200px;
    text-align: center;
    }
    
    .main{
    float: right;
    width: 790px;
    height: 100%;
    min-height: 530px;
    border: 2px;
    border-color: #660066;
    border-style: none;
    border-left-style: solid;
    }
    
    .search{
    height: 30px;
    width: 790px;
    }
    
    .content{
    height: 100%;
    min-height: 500px;
    width: 790px;
    }
    
    .footer{
    float: left;
    width: 995px;
    margin-top: 5px;
    text-align: center;
    font-size: 11px;
    clear: both;
    }
    
    .seventypercent{
    width: 70%;
    }
    
    img{
    border: 0px;
    }
    .center{
    text-align: center;
    }
    .underline{
    text-decoration: underline;
    }
    .bold{
    font-weight: bold;
    }
    .italics{
    font-style: italic
    }
    .eleven{
    font-size: 11px;
    }
    .twelve{
    font-size: 12px;
    }
    .fourteen{
    font-size: 14px;
    }
    .sixteen{
    font-size: 16px;
    }
    .gray{
    color: #6F6F6F;
    }
    .eighteen{
    font-size: 18px;
    }
    .twentyeight{
    font-size: 28px;
    }
    .twentysix{
    font-size: 26px;
    }
    .thirtytwo{
    font-size: 32px;
    }
    .skyblue{
    color: #3399FF;
    }
    .red{
    color: #FF0000;
    }
    .green{
    color: #008800;
    }
    .blue{
    color: #000000;
    }
    .fortyfive{
    width: 45%;
    }
    .sixty{
    width: 60%;
    }
    .twenty{
    width: 20%;
    }
    .clear{
    clear: both;
    }
    Last edited by HDRebel88; 05-04-2011 at 02:40 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Try adding

    Code:
    overflow: auto;
    to your content_wrapper.
    Teed

  • Users who have thanked teedoff for this post:

    HDRebel88 (05-04-2011)

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Alright, that took care of that. Thanks. But now the copyright (footer) is being pulled up into the content_wrapper div. Ideas to fix that, so it sits outside the content_wrapper.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Move that footer div outside the closing content_wrapper div.
    Teed

  • #5
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Ahh... Well it was intended to be outside that content_wrapper div. I missed the closing </div> for that opening tag. Fixed now, thanks.


  •  

    Posting Permissions

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