nnnniiiicccc
April 20th, 2010, 10:19 AM
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 http://www.welovecss.com/images/smilies/smile.gif
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 http://www.welovecss.com/images/smilies/smile.gif