1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Rep Power

    Yet another <div> problem

    I've added a border around my exiting web sites main interface page (all the content gets generated via php inside this page). But I'm having two probelms with the <div> structure that are driving me mad. I've moved all the styles inline and I've taken out almost all the php to make the file more readable.

    I have two points of confusion. 1) Why is the lower part of the border showing outside the container with the background. 2) How do I get the side parts of the border to fill the entire side. I googled this and have given all the containing div's heights, but every time I give these elemnts height other than the size of the image in the background they shrink to about 20 pixels.

    Thanks for any help. You can see the real web page at www.greystackcellars.com
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <title><?php print $meta_title ?></title>
    .HeadLine {
    	background-color: #8c8170;
    	height: 25px;
    	text-align: center;
    	vertical-align: middle;
    	padding-top: 7px;
    	color: #FFFF99;
    	font-size: 14px;
    .Bottom {
    	COLOR: #333333;
    	font-size: 10px;
    	text-align: center;
    	clear: both;
    	background-color: #8C8170;
    	width: 820;
    	height: 25px;
    	padding-top: 7px;
    <body style="margin:0; padding:0; height:100%;" >
    <div ID="Container" style="border: solid #8C8170 2px; margin: 0 auto; width: 962px; z-index: 1; height: 100%; background: url(images/background.jpg); background-repeat: repeat;"> 
    <div id="top_decoration" >
      <div style="width:54px; height:51px; float:left; background: url(images/label-border-top-left.gif);"></div>
      <div style="float:left; width:857px; height:51px; background: url(images/label-border-top-mid.gif);" ></div>
      <div style="width:51px; height:51px; float:right; background: url(images/label-border-top-right.gif);" ></div>
    <div id="border_container" style="height:100%; clear:both;">
    <div id="left_border" style="height:550px; float:left; width: 20px; background: url(images/label-border-left.gif); background-repeat: repeat;">
      <div id="content_container" style="float:left; width:920px;">
    <div id="Banner" style="position:relative; height:150px; width: 100%;">
    	<div id="YouAreHere" 
    		   padding-left: 10px;
    			height: 140px;
    	</div><!-- your are here -->
    	<div id="logo" style="float:left;">
    	<IMG src="images/logo.jpg" border="0" alt="Grey Stack Cellars"/>
    	<div align="right" style="float:right; padding-right: 20px; height:150px;">
    		<table height ="100%" width="100%">
    			<tr><td align="center">
    <?php if ($_SERVER['HTTPS'] == 'on')
    		<img src="images/icon-thawte2.gif" alt="Thawte SSL">
    </div> <!-- banner -->
    <div id="headline" style="clear:both; background-color: #8c8170; height: 25px; text-align: center; vertical-align: middle; padding-top: 7px; color: #FFFF99; font-size: 14px; width: 100%;">
    <a href="index.php?Page=Home" class="head">Home</a> &nbsp;|&nbsp; 
    <a href="index.php?Page=Bennett Valley" class="head">Bennett Valley</a> &nbsp;|&nbsp;
    <a href="index.php?Page=WineCategory& Category=Current Release Wines" class="head">Buy Wine</a> &nbsp;|&nbsp;
    <a href="index.php?Page=People" class="head">Information</a>  &nbsp;|&nbsp;
    <a href="index.php?Page=ContactUs" class="head">Contact</a>  &nbsp;|&nbsp;  
    <a href="AccountFunctions.php?Mode=Cart" class="head">View Cart</a>   &nbsp;|&nbsp;
    <a href="index.php?Page=Background" class="head">Trade</a>  &nbsp;|&nbsp;
    <a href="http://www.greystackcellars.com/HomeGrown/index.php?Page=AccountManager" class="head">My Account</a>
    &nbsp;|&nbsp; <a href="AccountFunctions.php?Mode=LogOut" class="head">Log Out</a>
    </div><!-- headline -->
    <div ID="Wrapper" style="width: 920px; z-index: 1; height: auto; min-height: 400px; vertical-align: top; background: url(images/background.jpg); background-repeat: repeat;"> <!-- This has almost everything -->
    <div ID="main" style=" padding: 10px 0px 10px 0px;"> <!-- this has just the padding -->
    	<div class="DialogTitle" style=" color:#555555;">
    			<?php print $page_title ?>
    	</div><!-- page title -->
    	if (!file_exists($page_file))
    		print ("Internal error: File ".$page_file." for Page ".$_REQUEST['Page']. " not found<br>");
    </div> <!-- main -->
    </div> <!-- Wrapper -->
    <div class="Bottom">
    <a href="index.php?Page=SiteMap" class="bottom-link">Site Map</a> | 
    <a href="index.php?Page=Terms" class="bottom-link">Terms &amp; Conditions</a> | 
    <a href="index.php?Page=Privacy" class="bottom-link">Privacy Policy</a> |
    <a href="index.php?Page=Gallery" class="bottom-link">Photo Gallery</a>
    </div> <!-- Bottom -->
    </div> <!-- content_container -->
    	<div id="right_border"  style="float:right; width: 20px;">
      <img src="images/label-border-right.gif" width="20" height="555">
    </div> <!-- left and right border_container -->
    <div id="bottom_decoration" style="clear:both">
      <div style="width:56px; height:56px; float:left; background: url(images/label-border-bot-left.gif);"></div>
      <div style="float:left; width:848px; height:51px; background: url(images/label-border-bot-mid.gif);" ></div>
      <div style="width:56px; height:56px; float:right; background: url(images/label-border-bot-right.gif);" ></div>
      </div><!--bottom decoration-->
    </div> <!--Container-->

    Peter Young
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Rep Power

IMN logo majestic logo threadwatch logo seochat tools logo