Making a Div that matches the postion of another

programming web dev
1

Hi,

I have a div (id=submenu) on the left hand side of my page, which has a varying size depending on the page and how many menu items are within it.

This div is within another div (id=left column).

To the right of this left column div i have another div (id=content)… within this content div i have another div (id=trees)…

What I am trying to achieve is the following …

As the submenu div increases and decreases in height throughout my website, I want the trees div to always be postioned to the right of the submenu div and be aligned with the bottom of the submenu div.

Here is my HTML :

<!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=utf-8" />
<link href="css1.css" rel="stylesheet" type="text/css">
 
 
<title>Wawa Malawi</title>
 
</head>
 
<body topmargin="0">
 
<div id="body">
 
<table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td>
 
 
  <div id="pagecontainer">
    <div id="header">
    <img src="images/header2.jpg" border="0" usemap="#Map" />
 
    </div>
 
    <div id="topspacer"> </div>
 
    <div id="maincontent">
      <div id="leftcolumn"><div id="menu">
 
        <div id="menuitems">  <a href="index.html"><img border="0" src="images/home.jpg" /> </a></div>
 
 
        <div id="menuitemscontainer">
 
        <div id="menuitems"><a href="aboutmalawi.html"><img border="0" src="images/about.jpg" /></a></div>
        <div id="menuitems"><a href="usefulinformation.html"><img border="0" src="images/usefulinfo.jpg" /></a></div>
        <div id="menuitems"><a href="accommodation.html"><img border="0" src="images/accommodation.jpg" /></a></div>
        <div id="menuitems"><a href="transport.html"><img border="0" src="images/transport.jpg" /></a></div>
        <div id="menuitems"><a href="seeanddo.html"><img border="0" src="images/seeanddo.jpg" /></a></div>
        <div id="menuitems"><a href="regions.html"><img border="0" src="images/regions.jpg" /></a></div>
 
        </div>
 
         </div>
 
 
<div id="submenu">
 
        <ul id="submenu">
          <li><a href="#"><strong>North</strong></a></li>
          <li><a href="accommodation-north-chitipa.html">Chitipa</a></li>
          <li><a href="accommodation-north-karonga.html">Karonga</a></li>
          <li><a href="accommodation-north-likoma.html">Likoma</a></li>
          <li><a href="accommodation-north-mzimba.html">Mzimba</a></li>
          <li><a href="accommodation-north-nkhatabay.html">Nkhata Bay</a></li>
          <li><a href="accommodation-north-rumphi.html">Rumphi</a></li>
 
 
        </ul>
 
        </div>
 
      </div>
 
      <div id="content">
      Accommodation - North - Chitipa 
 
 
      </div>
 
 
 
      <div id="trees"> </div>
 
 
 
      <div id="quicklinks">
      <img src="images/quicklinks.jpg" /> <br />
 
<div id="quicklinks_col">
<img src="images/about-malawi-quick.jpg" />
<br /><br />
<a href="summary.html">Summary</a> <br />
<a href="history.html">History</a><br />
<a href="climate.html">Climate</a><br />
<a href="language.html">Language</a><br />
<a href="politics.html">Politics</a> <br />
<a href="economy.html">Economy</a><br />
<a href="geography.html">Geography</a><br />
<a href="culturalnotes.html">Cultural Notes</a>
</div>
 
 
 
<div id="quicklinks_col">
<img src="images/useful-info-quick.jpg" />
<br /><br />
<a href="health.html">Health</a><br />
<a href="education.html">Education</a><br />
<a href="immigrationandvisa.html">Immigration & Visa</a><br />
<a href="moneyandcosts.html">Money & Costs</a> <br />
<a href="importantcontacts.html">Important Contacts</a><br />
<a href="communications.html">Communications</a><br />
<a href="Nichola Jones/housing.html">Housing</a> <br />
<a href="security.html">Security</a><br />
 
</div>
 
<div id="quicklinks_col">
<img src="images/see-and-do-quick.jpg" />
<br /><br />
<a href="entertainment.html">Entertainment</a><br />
<a href="nightlife.html">Night Life</a><br />
<a href="eatingout.html">Eating Out</a><br />
<a href="museums.html">Museum & Libraries</a><br />
<a href="sportsandactivities.html">Sports & Activities</a><br />
<a href="areasofinterest.html">Areas of Interest</a><br />
 
 
</div>
 
<div id="quicklinks_col">
<img src="images/buy-and-sell-quick.jpg" />
 
 
</div>
 
 
 
<div id="quicklinks_endcol">
<img src="images/wawamalawigroup-quick.jpg" />
<br /> <br />
Contact <br />
About <br />
Trade <br/>
Links 
</div>
 
 
 
 
</div>   
<div id="footer"> © Copyright - Wawa Malawi.com - All Rights Reserved </div> 
 
 
 
  </div>
 
  </div>
<div id="bottomspace"></div>
 
 
</td></tr></table>
 
 
</div>
 
 
 
<map name="Map" id="Map">
  <area shape="rect" coords="5,8,190,168" href="index.html" alt="Home" />
</map>
</body>

And here is my css:

 
@charset "utf-8";
/* CSS Document */
 
#body {
text-align:center;
padding:0px;
margin:0px;
background-image:url(images/background.jpg);
background-repeat:no-repeat;
 
}
 
#pagecontainer {
display: inline-block;
display: block;
overflow: hidden;
height:auto;
width: 1026px;
padding:0px;
background-image:url(images/shadowbackground.png);
 
}
 
 
#topspacer {
width:1000px;
height:25px;
}
 
#header {
width:1000px;
height:175px;
padding:0px;
margin-right:13px;
margin-left:13px;
 
}
 
 
 
#maincontent {
height:auto;
}
 
#leftcolumn {
width:200px;
height:auto;
float:left;
border-right-color:#999;
margin-left:13px;
}
 
#content {
width:760px;
height:auto;
float:left;
font-family:Helvetica, sans-serif, Arial;
font-size:13px;
text-align:justify;
margin-left:20px;
margin-right:20px;
}
 
 
 
#menu {
width:175px;
height:245px;
background-color:#F15A24;
margin-left:12.5px;
margin-right:12.5px;
margin-bottom:25px;
 
}
 
#menuitemscontainer {
width:175px;
height:210px;
background-color:#F15A24;
}
 
#menuitems {
width:155px;
height:25px;
text-align:right;
color:#FFF;
font-family:Helvetica, sans-serif, Arial;
font-size:15px;
padding-right:20px;
padding-top:10px;
 
}
 
#menuitems a:hover {
    color:#FF5900;
}
 
#menuitems a{
color:#FFF;
text-decoration:none;
font-size:15px;
 
}
 
 
#menuselecteditem {
width:155px;
height:25px;
background-color:#FF5900;
text-align:right;
color:#FFF;
font-family:Helvetica, sans-serif, Arial;
font-size:15px;
padding-right:20px;
padding-top:10px;
}
 
#menuselecteditem a{
color:#000000;
text-decoration:none;
font-size:15px;
}
 
 
 
 
#submenu {
 
    width:200px;
    padding:0;
text-align:left;
margin-left:12.5px;
}
 
#submenu li,#menu li a {
    display:block;
    list-style:none;
}
 
#submenu li a {
    height:25px;  
    color:#333;
    font:90%/25px Helvetica; 
    text-decoration:none;
    text-align:left;
 
 
 
}
#submenu li a:hover {
    color:#FF5900; 
}
 
 
 
#slideshow {
width:760px;
height:260px;
margin-bottom:15px;
background-image:url(images/slideshow2.jpg);
}
 
#browsebyregion {
width:245px;
height:290px;
margin-bottom:10px;
float:left;
}
 
#attractions {
width:245px;
height:290px;
margin-left:25px;
float:left;
text-align:center;
background-image:url(images/topattractions.jpg);
 
}
 
#attractionstext {
height:230px;
width:205px;
font-family:Helvetica, sans-serif, Arial;
font-size:13px;
text-align:justify;
margin-top:60px;
margin-left:20px;
margin-right:20px;
margin-bottom:0px;
line-height:10px;
font-weight:bold;
}
 
#attractionstextsmall {
font-family:Helvetica, sans-serif, Arial;
font-size:11px;
text-align:left;
font-weight:100px;
color:#666;
font-weight:normal;
line-height:12px;
}
 
#buyandsell {
width:245px;
height:290px;
margin-bottom:10px;
float:right;
text-align:center;
background-image:url(images/buyandsell.jpg);
 
}
 
#trees {
width:800px;
height:98px;
background-image:url(images/trees.jpg);
float:right;
margin-right:13px;
vertical-align:baseline;
}
 
 
#quicklinks {
width:1000px;
height:275px;
background-color:#000;
color:#FFF;
text-align:left;
font-family:Helvetica, sans-serif, Arial;
font-size:15px;
float:left;
line-height:20px;
margin-left:13px;
margin-right:13px;
}
 
#quicklinks_col {
width:179px;
height:auto;
float:left;
text-align:left;
margin-top:10px;
margin-left:20px;
border-right-color:#FFF;
border-right-style:solid;
border-right-width:1px;
margin-bottom:10px;
 
}
 
 
#quicklinks_endcol {
width:179px;
height:180px;
float:left;
text-align:left;
margin-top:10px;
margin-left:20px;
margin-bottom:10px;
 
}
 
#quicklinks a{
color:#FFF;
text-decoration:none;
}
 
 
#footer {
width:1000px;
height:20px;
background-color:#000000;
float:left;
color:#FFF;
text-align:left;
font-family:Helvetica, sans-serif, Arial;
font-size:10px;
text-indent:10px;
margin-left:13px;
margin-right:13px;
}
 
#bottomspace {
height:25px;
}
 
 
 
.contentbold {
font-weight: bold;
}
 
#contentlist {
line-height:30px;
}

Any help and suggestions would be much appreciated!!!

Thanks

Nic