OK. Probably a bit of a newbie question but I'm stumped...
Imagine a standard webpage layout with a header and 2 column layout underneath with a column for the menu options on the left and the main content on the right.
I'm trying to get a 'sponsor' logo to sit under the menu options but the bottom of the column sitting level with the bottom of the content in the main content column. No matter what I try, the logo always ends up tucking itself directly under the menu options.
Now this site has several pages and the 'content' on each page might be any length so I don't want to fix it with hard positioning. Also, the end site will be editable via Contribute so the CSS should be able to deal with any amendments on the mainContent column's content without needing to tweak the css.
The html I have boils down to this..
----
<div id="container">
<div id="header">
/* Header Logo and text */
</div>
<div id="sidebar">
<div id="menulist">
/* menu list */
</div>
<div id="sponsorlogo">
<img src="sponsorlogo.png" width "150" height "100" />
</div>
</div>
<div id="mainContent">
/* Main blurb */
</div>
</div>
----
The only bits of CSS that I have that deal with layout are...
.container {
width: 780px;
margin: 0 auto;
}
.sidebar {
float: left;
width: 150px;
}
.mainContent {
margin: 0 0 0 155px;
}
.sponsorlogo {
display:block;
position:absolute;
bottom:0px;
left:0px;
}
Any ideas on how make this work?
