...

View Full Version : Image @ bottom left of a 2 column layout



dale303
06-21-2010, 05:56 PM
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 solid 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?

optimus203
06-21-2010, 11:16 PM
Does something like this work?



<!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" />
<style type="text/css">
#container {
width: 780px;
margin: 0 auto;
}

#sidebar {
float: left;
width: 150px;
}

#content {
position: relative;
width: 780px;
height: auto;
}
#mainContent {
margin: 0 0 0 155px;
}

#logo {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
/* Header Logo and text */
</div>

<div id="content">

<div id="logo">
<img src="sponsorlogo.png" width "150" height "100" alt="sponsor logo" />
</div>

<div id="sidebar">
<div id="menulist">
menu list
</div>
</div>


<div id="mainContent">
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
/* Main blurb */<br />
</div>
</div>
</div>

</body>
</html>

dale303
06-23-2010, 11:51 PM
Great, thanks. Perfect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum