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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Location
    Quebec
    Posts
    261
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Expanding Div's to match content (over)flow

    Hi,

    I've been working on a site and I've run into a problem. I wanted the site to be a 'fluid' design, so that everything would adjust and match according to the amount of content. Problem is, I can't get 2 side panels to match the main content panel. When the content is very long, it keeps on going down the page with it's appropriate background but the 2 panels on each of it stop abruptly after the 770px min-height that they have been assigned too. I'm hoping someone can suggest a way for me so that all 3 panels will always stay alongside each other past 770px. I've tried to place a container class that I was hoping when pushed past it's min-height would push the panels too, but it doesn't

    Template page: http://tinyurl.com/38dfz2 (I would prefer to keep the domain disclosed for now as I don't want Google to pick it up yet :P)

    Template code: (I am aware that some parts say mysite.com, I added that. Again, another no search engine indexing attempt )
    PHP Code:
    <?php 
    ob_start
    ();
    include_once(
    "class/startclasses.php"); 
    ?>
    <!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" />
    <meta name="keywords" content="<?php $pageStructure->GetMetaTags("ridemtl_meta_tags"); ?>"  />
    <title><?php try{
            
    $pageStructure->GetTitle("ridemtl_basic_page"); 
            }catch(
    Exception $e){
                echo 
    $e->getMessage();
            } 
    ?>
            </title>
    <link href="http://www.mysite.com/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="fullContainer">
      <div class="advertising">Advertising</div>
      <div id="header"><img src="/new/images/ridemtl_header.gif" alt="Ride Montreal Banner" /></div>
      <div id="navbar">
          <div id="nav_links"><?php include_once($include['inc']."navbar.inc"); ?></div>
      </div>
      
      <div class="siteContainer">
          <div id="left_panel"><!--logo--><img src="/new/images/ridemtl_lpanel_target.gif" alt="Ride Montreal" />
            <div class="panel_title"><img src ="/images/media_bar.png" alt="Media" /></div>
            <div id="left_panel_content"><?php include($include['inc']."infocenter.php"); ?></div>
        </div>
        
         <div id="content_panel">
             <div id="content_biker_bg">
                <div id="content">
                CONTENT HERE
                </div><!--end content-->
            </div><!--end biker_bg-->
        </div><!--end content_panel-->
        
        <div id="right_panel">
            <div class="panel_title"><img src ="http://www.mysite.com/images/settings_bar.png" alt="Settings" /></div>
            <div id="right_panel_content"><?php include_once($include['inc']."loginDisplay.php"); ?></div> <!--end right panel content-->
        </div><!--end right panel-->
      </div><!--end sitecontainer-->
    </div><!-- full container -->
        <div id="footer"><?php $pageStructure->GetCopyright("ridemtl_basic_page"); ?></div>

    </body>
    </html>
    <?php ob_end_flush(); ?>
    Finally, here is the CSS.
    Code:
    /* fl00d */
    body {
    min-height:100%;
    background:url('images/body_bg.png');
    background-repeat:repeat;
    }
    
    /* Advertising Classes */
    .advertising {
    width:80px;
    height:auto;
    margin:0 auto;
    float:left;
    }
    
    .advertisingr {
    width:80px;
    height:auto;
    margin:0 auto;
    float:right;
    }
    
    /*Main Site */
    a:link {
    color:#999999;
    text-decoration:none;
    font-weight:600;
    }
    
    a:visited {
    color:#999999;
    font-weight:600;
    text-decoration:none;
    }
    a:hover {
    color:#999999;
    text-decoration:underline;
    }
    /* Layout and navbar */
    .fullContainer { /*for all encasped elements */
    width:1000px;
    min-height:978px;
    margin:0 auto;
    clear:both;
    }
    
    .siteContainer { /* from header down. does NOT include ad places */
    width:800px;
    min-height:770px;
    /*background:white;*/
    margin:0 auto;
    }
    
    #header {
    width:800px;
    margin:0 auto;
    }
    
    #footer {
    background:url('images/ridemtl_footer.gif');
    width:800px;
    height:20px;
    margin:0 auto;
    font-size:11px;
    text-align:center;
    line-height:150%;
    color:#FFFFFF;
    }
    /* Navbar */
    #navbar {
    background:url('images/ridemtl_navbar.gif');
    width:800px;
    height:44px;
    margin:0 auto;
    }
    
    #nav_links {
    height:44px;
    font-family:Century Gothic;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color:#736F6A;
    line-height:300%;
    }
    
    #nav_links a:link {
    font-family:Century Gothic;
    font-weight:bold;
    color:#736F6A;
    text-decoration:none;
    }
    
    #nav_links a:visited {
    font-family:Century Gothic;
    font-weight:bold;
    color:#736F6A;
    text-decoration:none
    }
    
    #nav_links a:hover {
    font-family:Century Gothic;
    font-weight:bold;
    color:#444444;
    font-size:19px;
    text-decoration:none;
    }
    /* Panels */
    #left_panel {
    background:url('images/ridemtl_left_panel.gif');
    background-repeat:repeat;
    width:142px;
    min-height:770px;
    margin:0 auto;
    float:left;
    }
    
    #left_panel_content {
    width:130px;
    font-family:Verdana;
    font-size:10px;
    padding-left:10px;
    padding-top:5px;
    }
    
    #right_panel {
    background:url('images/ridemtl_right_panel.gif');
    background-repeat:repeat;
    width:142px;
    min-height:770px;
    margin:0 auto;
    float:left;
    }
    
    #right_panel_content {
    width:130px;
    font-family:Verdana;
    font-size:10px;
    text-align:center;
    padding-top:5px;
    padding-left:10px;
    }
    
    .panel_list {
    color:#000000;
    }
    /* Content*/ 
    #content_panel {
    background:white;
    width:516px;
    min-height:770px;
    margin:0 auto;
    float:left;
    }
    
    #content_biker_bg {
    background:url('images/ridemtl_content_bg.gif');
    background-repeat:no-repeat;
    width:516px;
    min-height:770px;
    }
    
    #content {
    width:480px;
    height:auto;
    color:black;
    font-family:Georgia, Century, Verdana, Times New Roman;
    font-size:13px;
    height:auto;
    padding:20px;
    padding-bottom:5px;
    }
    
    #content a:link {
    color:red;
    text-decoration:none;
    }
    #content a:visited {
    color:red;
    text-decoration:none;
    }
    
    #content a:hover {
    color:red;
    text-decoration:underline;
    }
    /* 
    Titles and headers 
    */
    
    /* Title for left & right panels */
    .panel_title {
    width:142px;
    height:20px;
    color:black;
    font-weight:bold;
    margin:0 auto;
    margin-top:5px;
    }
    /* content titles */
    .news_title {
    color:#444444;
    text-decoration:underline;
    text-align:left;
    }
    /* news title h1 link color */
    .news_title a:link {
    color:#444444;
    }
    
    .news_title a:visited {
    color:#444444;
    }
    .sub_title {
    color:#444444;
    text-decoration:underline;
    text-align:left;
    font-size:15px;
    font-weight:bold;
    }
    
    .h3Title {
    color:red;
    text-decoration:underline;
    text-align:left;
    font-size:13px;
    }
    
    .review_title {
    background:url('images/review_title_bg.png');
    background-repeat:no-repeat;
    width:425px;
    height:20px;
    color:#FFFFFF;
    font-family:Century Gothic;
    font-size:14px;
    text-align:center;
    line-height:150%;
    }
    /* form styling */
    
    /* trails page select list style */
    #orderby {
    width:auto;
    margin:0 auto;
    float:right;
    }
    
    #orderby select {
    width:80px;
    font-size:10px;
    background:url('images/orderby_select.png');
    }
    
    #orderby input {
    font-size:10px;
    }
    Any suggestions?
    Thanks
    -fl00d

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

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