...

View Full Version : Expanding Div's to match content (over)flow



fl00d
02-21-2008, 04:03 AM
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 :D)


<?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.

/* 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

twodayslate
02-21-2008, 05:41 AM
So like this?
http://bonrouge.com/3c-hf-fluid.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum