Forum Moderators: not2easy
I need to to have an image display at the bottom of the left sidebar regardless of how much text is in the main content column.
I've spent all day experimenting with negative margins but I can't get the image to display at the bottom of the left sidebar.
Sorry about this post, I'm not the type that goes blindly into message boards for help but this is driving me crazy. I've searched a ton online and in this forum but I can't find a definitive answer.
Any help would be greatly appreciated. Like I said, this is driving me crazy.
-------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example 4: Negative Margins</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
/*<![CDATA[*/
body {
margin:50px 0px; padding:0px;
text-align:center;
background-color:#889684;
font-family:Arial, Helvetica, sans-serif;
font-size:.7em;
}
#main {
border:3px solid #fff;
width:850px;
margin:0px auto;
padding:0px auto;
}
#wrapper {
background: #fff url(img/background_2.gif) repeat-y right;
width:850px;
margin:0px auto;
padding:0px;
text-align:left;
}
#header {
background: #fff;
height:113px;
width:850px;
margin:0px auto;
padding-bottom:3px;
}
#header .logo {
margin-right:3px;
}
#navigation {
background-color:#134343;
color:#fff;
height:26px;
width:850px;
margin:0px auto;
padding:0px;
}
#navsections {
margin: 0;
padding-left:83px;
}
#navsections li {
list-style: none;
height: 26px;
float: left;
position: relative;
margin-right:7px;
}
#navsections li a {
height: 26px;
text-indent: -9000px;
display: block;
}
a#about{
width: 47px;
height: 26px;
}
a#reservations{
width: 84px;
height: 26px;
}
a#specials {
width: 138px;
height: 26px;
}
a#accommodations{
width: 112px;
height: 26px;
}
a#dining{
width: 50px;
height: 26px;
}
a#location{
width: 152px;
height: 26px;
}
a#area{
width: 67px;
height: 26px;
}
a#about { background-image: url(img/nav_about.png); background-repeat:no-repeat; }
a#reservations { background-image: url(img/nav_reservations.png); background-repeat:no-repeat; }
a#specials { background-image: url(img/nav_specials.png); background-repeat:no-repeat; }
a#accommodations { background-image: url(img/nav_accommodations.png); background-repeat:no-repeat; }
a#dining { background-image: url(img/nav_dining.png); background-repeat:no-repeat; }
a#location { background-image: url(img/nav_location.png); background-repeat:no-repeat; }
a#area { background-image: url(img/nav_area.png); background-repeat:no-repeat; }
a#reservations:hover, a#about:hover, a#specials:hover, a#accommodations:hover, a#dining:hover, a#location:hover, a#area:hover{ background-position: 0 -26px; }
#container {
width: 100%;
background: #fff url(img/background.gif) repeat-y left;
float: right;
margin-left: -200px;
margin-top:3px;
}
#content {
background: #fff;
margin-left: 200px;
padding: 30px 40px 0px 40px;
}
#content .inset {
float:right;
margin:15px;
border:1px solid #ccc;
padding:3px;
}
#content h2{
color:#004868;
font-family:Georgia, "Times New Roman", Times, serif;
}
#sidebar {
width: 200px;
float: left;
}
#sidebar ul {
list-style-type:none;
}
#footer {
background: #d7dabd;
width:850px;
margin:0px auto;
padding:0px;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
</style>
</head>
<body>
<div id="main">
<div id="header"><img src="img/gwui_logo.jpg" alt="George Washington University Inn" class="logo" /><img src="img/header_graphic.jpg" alt="header graphic" /></div>
<div id="navigation">
<ul id="navsections">
<li title="About"><a href="#" id="about">About</a></li>
<li title="Reservations"><a href="#" id="reservations">Reservations</a></li>
<li title="Specials"><a href="#" id="specials">Specials and Packages</a></li>
<li title="Accommodations"><a href="#" id="accommodations">Accommodations</a></li>
<li title="Dining"><a href="#" id="dining">Dining</a></li>
<li title="Location"><a href="#" id="location">Location and Directions</a></li>
<li title="Area Guide"><a href="#" id="area">Area Guide</a></li>
</ul>
</div>
<div id="wrapper">
<div id="container">
<div id="content">
<img src="img/location_title.png" alt="Location and Directions" />
<img src="img/room_image.jpg" class="inset" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat nibh ac ligula elementum egestas. Aliquam quis velit est, ac fringilla risus. Ut elit ante, egestas ut dictum nec, molestie ac sem. In id tellus in justo vehicula ornare nec nec quam. Cras a elit at urna molestie laoreet quis eu nibh. Phasellus sodales dictum tortor, et tristique nibh congue ac. Proin ligula nibh, tempor lacinia volutpat eget, laoreet in justo. Morbi facilisis aliquet diam id dapibus. Nam accumsan accumsan ornare. Sed id orci non nisi malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat nibh ac ligula elementum egestas. Aliquam quis velit est, ac fringilla risus. Ut elit ante, egestas ut dictum nec, molestie ac sem. In id tellus in justo vehicula ornare nec nec quam. Cras a elit at urna molestie laoreet quis eu nibh. Phasellus sodales dictum tortor, et tristique nibh congue ac. Proin ligula nibh, tempor lacinia volutpat eget, laoreet in justo. Morbi facilisis aliquet diam id dapibus. Nam accumsan accumsan ornare. Sed id orci non nisi malesuada feugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat nibh ac ligula elementum egestas. Aliquam quis velit est, ac fringilla risus. Ut elit ante, egestas ut dictum nec, molestie ac sem. In id tellus in justo vehicula ornare nec nec quam. Cras a elit at urna molestie laoreet quis eu nibh. Phasellus sodales dictum tortor, et tristique nibh congue ac. Proin ligula nibh, tempor lacinia volutpat eget, laoreet in justo. Morbi facilisis aliquet diam id dapibus. Nam accumsan accumsan ornare. Sed id orci non nisi malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque placerat nibh ac ligula elementum egestas. Aliquam quis velit est, ac fringilla risus. Ut elit ante, egestas ut dictum nec, molestie ac sem. In id tellus in justo vehicula ornare nec nec quam. Cras a elit at urna molestie laoreet quis eu nibh. Phasellus sodales dictum tortor, et tristique nibh congue ac. Proin ligula nibh, tempor lacinia volutpat eget, laoreet in justo. Morbi facilisis aliquet diam id dapibus. Nam accumsan accumsan ornare. Sed id orci non nisi malesuada feugiat.</p>
<h2>Phasellus velit turpis</h2>
<p>Nulla id ornare lectus. Proin cursus gravida felis, eu molestie nulla lobortis vel. Sed eleifend, diam eu elementum interdum, purus odio porttitor dui, a placerat nulla sapien vitae purus. Fusce elit elit, mattis ut vulputate id, dictum in enim. In gravida scelerisque libero, in laoreet tellus lacinia eget. Praesent semper suscipit feugiat. Quisque accumsan ligula vehicula augue dapibus et placerat dui molestie. Nulla quis nisl sit amet lectus rutrum tempus nec eu nisi. Nullam ac ipsum sit amet enim mattis lacinia. Donec a urna eget dui molestie imperdiet eget ut purus. Nunc viverra leo vel ipsum condimentum laoreet. Sed ut risus non metus pharetra luctus. Fusce eu ultrices nisi. Aenean pretium sagittis arcu et pellentesque. Suspendisse vitae mattis nunc. Maecenas commodo, turpis eget fermentum posuere, neque mauris ullamcorper nunc, in pharetra mi felis eget sem. Aliquam erat volutpat. Nunc luctus, augue at luctus accumsan, diam nibh imperdiet felis, accumsan hendrerit eros nisi non ligula. Fusce rhoncus mauris at urna laoreet sed dignissim augue convallis. Curabitur congue porta commodo. </p>
</div>
</div>
<div id="sidebar">
<div id="sidebar_navigation">
<ul>
<li><img src="img/sidebar_nav_about.png" /></li>
<li><img src="img/sidebar_nav_about.png" /></li>
</ul>
</div>
<img src="img/gate_image.jpg" />
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
if you change the sidebar margin it should align it to the bottom. Something like:
#sidebar {
width: 200px;
float: left;
margin: 0px 4px -10000px 4px;
}
Doesn't work in your case?
