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 7 of 7
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question extending the left div navigation

    As you can see in teh picture below, the more items I add to my shopping basket, the more the page extends, I would like the left side (brown navigation) area to extend too I have tried height:100%; that doesn't work?!
    Can someone please help?


    Code:
    <!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>
    <title>Home</title>
    </head>
    <body >
    <div id="pagecontainer">
    <div id="header">
    	<div style="font-size:10px; margin-top:2px; text-align:right;">
    		<table style="margin:0 0 0 auto;">
    			<tr>
    				<td style="padding-right:8px; vertical-align:bottom;"><a href="index.asp?display=basket"><img src="images/build/basket.png" style="width:17px; height:26px;" alt="Shopping Basket"></a></td>
    				<td style="padding-bottom:4px; vertical-align:bottom;"><a href="index.asp?display=basket">Shopping Basket: Items 3</a></td>
    				
    					<td style="padding-left:8px; padding-bottom:5px; vertical-align:bottom;"><a href="index.asp?display=checkout" class="on" style="font-weight:bold;">Proceed to checkout</a></td>
    
    					<td style="padding-left:4px; padding-bottom:7px; vertical-align:bottom;"><a href="index.asp?display=checkout"><img src="images/build/checkoutarrow.png" alt="Checkout Now"></a></td>
    				
    			</tr>
    		</table>
    	</div>
    <div id="topnavigation">
    	<a href="index.asp?pageID=1" title="Home" class="on" >
    		HOME
    	</a>
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=96" title="Heritage" class="off" >
    		HERITAGE
    	</a>
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=97" title="Collection" class="off" >
    		COLLECTION
    	</a>
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=99" title="How To Buy" class="off" >
    		HOW TO BUY
    	</a>
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=100" title="Contact Us" class="off" >
    		CONTACT US
    	</a>
    </div>
    </div>
    <table cellspacing="0" cellpadding="0" id="shadows">
    	<tr>
    		<td colspan="3" style="height:11px;"><img src="images/build/shadow/ShadowTop.jpg" style="width:1024px;" /></td>
    	</tr>
    	<tr>
    		<td style="width:22px; vertical-align:top; background-image:url(images/build/shadow/shadow2L.jpg);"><img src="images/build/shadow/shadow1L.jpg" /></td>
    		<td rowspan="2">
    							<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/thickbox.js"></script>
    <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
    <div id="maincontent">
    <div id="leftnavigation">
    	<a href="index.asp?pageID=97&col_category=1&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >DRESSES
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=2&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >JACKETS
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=3&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >SKIRTS
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=4&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >TROUSERS
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=5&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >TOPS
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=6&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >SUITS AND TAILORING
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=7&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >OCCASION WEAR
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=8&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >EVENING WEAR
    	</a>
    <br /><img src="images/build/collectiondelim.png" />
    	<a href="index.asp?pageID=97&col_category=9&display=thumb" 
    	   title="Contact Us" 
    	   class="off" >FOR A WEDDING
    	</a>
    <br /><img src="images/build/collectiondelim.png" /></div>
    <style>
    #checkoutbox {color:black;}
    #buttonstop { position:absolute; right:20px; top:18px; }
    .proceedtocheckout {  } 
    </style>
    <div id="buttonstop">
    <form method="post" action="index.asp?display=checkout" name="tocheckout" style="float: right; clear: both; padding-right:30px">
    	<table style="margin:10px 0px;" >
    		<tr>
    			<td style="width:45%; text-align:center;"><a href="index.asp?pageID=97&display=main&Col_Category=1&productID=38" title="Continue Shopping"><img src="images/buttons/ContinueShoppingOff.png" onmouseover="this.src='images/buttons/ContinueShoppingOn.png';" onmouseout="this.src='images/buttons/ContinueShoppingOff.png';" border="0"></a></td>
    			<td style="width:10%;">&nbsp;</td>
    			<td style="width:45%; text-align:center;"><a href="index.asp?display=checkout" title="Proceed to checkout"><img src="images/buttons/ProceedToCheckoutOff.png" onmouseover="this.src='images/buttons/ProceedToCheckoutOn.png';" onmouseout="this.src='images/buttons/ProceedToCheckoutOff.png';" border="0"></a></td>
    		</tr>
    	</table>
    </form>
    </div>
    <ul id="steps1">
    		<li class="current">SHOPPING BASKET</li>
    	</ul>
    <table cellpadding="0" cellspacing="0" border="0" class="cont_body_table" style="width:568px;margin-right:8px;">
    			<tr>
    					<td>&nbsp;</td>
    					<td width="100%" class="cont_body_tall_t">&nbsp;</td>
    					<td>&nbsp;</td>
    			</tr>
    			<tr>
    					<td class="cont_body_tall_l">&nbsp;</td>
    					<td width="100%" class="cont_body_td vam">
    <form name="updateAHScart" method="post" action="">
    <table width="720" style="margin:58px 30px 30px 30px;">
    	<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
    	<tr>
    		<td style="padding:10px 0px;" width="200">
    			<img src="images/upload/Lace03_009thumb.png" alt="Picture of product" />
    		</td>
    		<td valign="top"  style="padding:10px 0px;">
    			<span style="text-transform: uppercase;">Cord Lace</span><br /><br />
    
    			Size: <strong>8</strong><br />
    			Color: <strong>Blue</strong><br /><br /><br />
    			Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty0')" style="cursor:pointer; ">
    			<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty0">
    			<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty0')" style="cursor:pointer; "></strong>
    			stock level <strong>4</strong>
    
    		</td>
    		<td>&nbsp;</td>
    		<td valign="top"  style="padding:10px 0px; text-align:right;">
    			&pound;369.00
    		</td>
    	</tr>
    	<tr>
    		<td height="1" colspan="4" bgcolor="#A36B7A"></td>
    	</tr>
    
    	
    	<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
    	<tr>
    		<td style="padding:10px 0px;" width="200">
    			<img src="images/upload/Lace01_002thumb.png" alt="Picture of product" />
    		</td>
    		<td valign="top"  style="padding:10px 0px;">
    			<span style="text-transform: uppercase;">Cord Lace</span><br /><br />
    
    			Size: <strong>12</strong><br />
    			Color: <strong>Red</strong><br /><br /><br />
    			Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty1')" style="cursor:pointer; ">
    			<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty1">
    			<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty1')" style="cursor:pointer; "></strong>
    			stock level <strong>5</strong>
    
    		</td>
    		<td>&nbsp;</td>
    		<td valign="top"  style="padding:10px 0px; text-align:right;">
    			&pound;549.00
    		</td>
    	</tr>
    	<tr>
    		<td height="1" colspan="4" bgcolor="#A36B7A"></td>
    	</tr>
    
    	
    	<div id="topheader1">Current subtotal: &pound;1,467.00<span>Item Price</span></div>
    	<tr>
    		<td style="padding:10px 0px;" width="200">
    			<img src="images/upload/Lace01_002thumb.png" alt="Picture of product" />
    		</td>
    		<td valign="top"  style="padding:10px 0px;">
    			<span style="text-transform: uppercase;">Cord Lace</span><br /><br />
    
    			Size: <strong>12</strong><br />
    			Color: <strong>Blue</strong><br /><br /><br />
    			Qty: <strong><img alt="Click here to reduce or remove your items" src="images/minus.gif" onClick="doQuantity('down', 'qty2')" style="cursor:pointer; ">
    			<input type="text" readonly name="qty" value="1" style="height:17px; border: 0px; width: 10px; border: #000 1px solid; width:20px; text-align:center;" id="qty2">
    			<img alt="Click here to increase the number of items in your basket" src="images/plus.gif" onClick="doQuantity('up', 'qty2')" style="cursor:pointer; "></strong>
    			stock level <strong>5</strong>
    
    		</td>
    		<td>&nbsp;</td>
    		<td valign="top"  style="padding:10px 0px; text-align:right;">
    			&pound;549.00
    		</td>
    	</tr>
    	<tr>
    		<td height="1" colspan="4" bgcolor="#A36B7A"></td>
    	</tr>
    
    	
      </td>
    	<tr>
          <td style="padding:10px 0px; font:arial;" colspan="3">For delivery information please <a href="delivery.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=320&width=500&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox"><span>click here ></span></a>
          <td style="text-align:right;" title="Sub Total">Subtotal:&nbsp;&pound;1,467.00</td>
        </tr>
    </table>
    </form>
    
    	
    
    <style>
    	#notreadytobuy 	{ background-color:#000000 !important; color:#ffffff; font-size:12px; font-weight:bold; width:145px; }
    	#readytobuy 	{ background-color:#000000 !important; color:#ffffff; font-size:12px; font-weight:bold; width:145px; }
    	.selectedheader { color:#A36B7A; }
    </style>
    
    <form method="post" action="index.asp?display=checkout" name="tocheckout" style="float: right; clear: both; padding-right:30px">
    	<table style="margin:10px 0px;" >
    		<tr>
    			<td style="width:45%; text-align:center;"><a href="index.asp?pageID=97&display=main&Col_Category=1&productID=38" title="Continue Shopping"><img src="images/buttons/ContinueShoppingOff.png" onmouseover="this.src='images/buttons/ContinueShoppingOn.png';" onmouseout="this.src='images/buttons/ContinueShoppingOff.png';" border="0"></a></td>
    			<td style="width:10%;">&nbsp;</td>
    			<td style="width:45%; text-align:center;"><!--<input type="submit" name="order" value="Proceed to checkout" id="readytobuy" />--><a href="javascript:document.tocheckout.submit();" title="Proceed to checkout"><img src="images/buttons/ProceedToCheckoutOff.png" onmouseover="this.src='images/buttons/ProceedToCheckoutOn.png';" onmouseout="this.src='images/buttons/ProceedToCheckoutOff.png';" border="0"></a></td>
    		</tr>
    
    	</table>
    </form>
    
    </table>
    
    
    
    <!-- BEGIN CHECKOUT CALL TO HSBC -->
    
    <!-- END CHECKOUT CALL TO HSBC -->
    </div>
    
              </td>
    		<td style="width:21px; vertical-align:top; background-image:url(images/build/shadow/shadow2R.jpg);"><img src="images/build/shadow/shadow1R.jpg" /></td>
    
    	</tr>
    	<tr>
    		<td style="height:53px; vertical-align:bottom; background-image:url(images/build/shadow/shadow2L.jpg);"><img src="images/build/shadow/shadow3L.jpg" /></td>
    		<td style="height:53px; vertical-align:bottom; background-image:url(images/build/shadow/shadow2R.jpg);"><img src="images/build/shadow/shadow3R.jpg" /></td>
    	</tr>
    	<tr>
    	
    		<td colspan="3" style="height:13px;"><img src="images/build/shadow/ShadowBottom.jpg" style="width:1024px;" /></td>
    	</tr>
    </table>
    
    <div class="footer">
    
    <div id="bottomnavigation">
    
    
    	<a href="index.asp?pageID=101" title="Terms and Condictions" class="off" >
    		TERMS AND CONDITIONS
    	</a>
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=114" title="Delivery information" class="off" >
    		DELIVERY INFORMATION
    	</a>
    
    &nbsp;&nbsp;
    	<a href="index.asp?pageID=103" title="Site Map" class="off" >
    		SITE MAP
    	</a>
    
    
    </div>
    
    <div id="companycontainer">&copy; Copyright 2010&nbsp;
    <br/><br/><span style="color:#999999">Created by:</span> 
    </div>
    </div>
    
    </div>
    <!-- include file="includes/__accessBackOffice.asp" --></body>
    </html>
    css
    Code:
    #maincontent {
    		display:inline;
    		width:981px;
    		min-height:520px;
    		float:left;
    		background-color:#FFFFFF;
    		overflow:hidden;
    		position:relative;
    	}
    #leftnavigation {
    		width:133px;
    		min-height:490px;
    		padding:30px 20px 0px 20px;
    		float:left;
    		font-size: 10px;
    		background-color:#D9CEBB; 
    		background-image:url('../images/build/pclogo.png'); 
    		background-position:bottom left; 
    		background-repeat:no-repeat;
    	}

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    82
    Thanks
    0
    Thanked 6 Times in 6 Posts
    There is a good article here about this.

    http://www.positioniseverything.net/...ut/equalheight

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Location
    Florida
    Posts
    155
    Thanks
    16
    Thanked 2 Times in 2 Posts
    Yes that is a good article, I've read it many times myself. Did that cover what you needed?

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by The reaper View Post
    Yes that is a good article, I've read it many times myself. Did that cover what you needed?
    looks like it might work, I'll give it a try in a mo!

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thinking about it... it might not work as the leftnavigation is inside the maincontainer?! but I haven't tried it yet?!

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    I cannot do it the way it said on the article as it pushes my logo right down!

    I have separated my left menu out into 3 divs now, #leftnavigation, #leftmenu and #pclogo it has moved down a bit more but still doesn't hit the bottom of the #maincontent:

    Code:
    <div id="leftnavigation">
    <div id="leftmenu">
    <%
    While NOT rs.EOF  
    response.write(delim) 
    rsID 		= rs("ID")
    'rsPageTitle = rs.Fields.Item("PageTitle").Value
    'rsLinkName	= getAddress & "index.asp?pageID=" & qsPageID & "&catID=" & rsID & "&display=thumb"
    %>
    	<a href="<%= getAddress & "index.asp?pageID=97&col_category=" & rsID & "&display=thumb"%>" 
    	   title="<%=(rsPageTitle)%>" 
    	   class="<%=IIF(cint(rsLinkName)=cint(rsID),"on","off")%>" ><%=(ucase(rs("CName")))%>
    	</a>
    <%
    delim = "<br /><img src=""images/build/collectiondelim.png"" />"
    rs.MoveNext() :: Wend 
    %>
    <br /><img src="images/build/collectiondelim.png" />
    </div>
    <div class="cl">&nbsp;</div>
    
    <div id="pclogo">&nbsp;</div>
    
    </div>
    CSS
    Code:
    .cl {
    		clear: both;
    	}
    	#leftnavigation {
    		float:left;
    		font-size: 10px;
    		background-color:#D9CEBB; 
    	}
    
    	#leftmenu {
    		width:133px;
    		min-height:490px;
    		padding-top:30px; 
    		padding-right:20px;
    		padding-bottom:0px;
    		padding-left:20px;
    		float:left;
    		font-size: 10px;
    	}
    	
    	#pclogo {
    		width:66px;
    		background-color:#D9CEBB;
    		background-image:url('../images/build/pclogo.png'); 
    		background-position:bottom left; 
    		background-repeat:no-repeat;
    		height:89px;
    	}

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jarv View Post
    I cannot do it the way it said on the article as it pushes my logo right down!
    Could the Faux Column method be a possible solution for you? It is mentioned in that article that harrierdh linked you to, I have a demo of it here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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