image - bottom alignment

[jhatter]

I have a side bar div, containing my vertical navigation, this is correctly positioned at the top.

I would like to place two separate image files side by side at the bottom of this div. The only way I can successfully do this is by putting a large margin between the bottom of the navigation and the top of the two logos.

Please can someone suggest a better, easier way to do this?

Thanks

<div id="sidebar">
	  <div id="nav">
		<ul>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Biography</a></li>
			<li><a href="#">Music</a></li>
			<li><a href="#">Images</a></li>
			<li><a href="#">Tosti</a></li>
            <li><a href="#">Press</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	 </div>
 <div class="fb_box"> 
<div class="pic"> 
<img src="imgs/fb_logo.gif" width="28" height="28" /></div>
   </div> 
<div class="tw_box"> 
<div class="pic">
<img src="imgs/tw_logo.gif" width="28" height="28"/></div> 
</div>   

</div>

<!--sidebar ends -->

#nav { padding:0px 40px 0px 0px; }
	
#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
	
#nav li {
	display:block;
	margin:0px;		
	padding-bottom:10px;
}

#nav a:link ,#navigation a:active, #navigation a:visited {
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #cb062b;
	display:block;
	text-decoration:none;
	text-align:right;
}

#nav a:hover { color: #eba0ae; display:block; text-decoration:underline; }

#nav li.active a { color: #ffffff;}


#sidebar {
	float:left;
	width:200px;
	height:430px;
	padding:0px;
	border:1px solid;
}
	
.fb_box {
	float:right;
	width: 32px;
	height: 32px;
	margin:0px;
	vertical-align:bottom;
	position:relative;
	padding-top: 215px;
	padding-right: 37px;
} 

.tw_box {
	float:right;
	width: 28px;
	height: 28px;
	margin:0px;
	vertical-align:bottom;
	position:relative;
	padding-top: 219px;
	padding-right: 5px;
} 

.pic { 
	height: 28px; 
	width:28px; 
	border: 0px; 
	position:absolute; 
	bottom:0; 
	background-color:#0066FF
}

[stringcugu]

<style>#nav { padding:0px 40px 0px 0px; }
#nav ul{margin:0;padding:0;list-style:none;}
#nav li{display:block;margin:0px;padding-bottom:10px;}
#nav a:link ,#navigation a:active, #navigation a:visited{
font: 13px Verdana, Arial, Helvetica, sans-serif;color: #cb062b;display:block;text-decoration:none;text-align:right;}
#nav a:hover { color: #eba0ae; display:block; text-decoration:underline; }
#nav li.active a { color: #ffffff;}
#sidebar {float:left;width:200px;height:430px;padding:0px;border:1px solid;}
.fb_box{float:right;width: 32px;height: 32px;margin:0px;vertical-align:bottom;position:relative;padding-top: 215px;padding-right: 37px;}
.tw_box{float:right;width: 28px;height: 28px;margin:0px;vertical-align:bottom;position:relative;padding-top: 219px;padding-right: 5px;}
.pic{ height: 28px; width:28px; border: 0px; position:absolute; bottom:0; background-color:#0066FF}
</style>
<div id="sidebar">
<div id="nav">
<p align='center'>MENU</p><a href="#"><img src="IMG_0162.gif" width="200" height="10" border="0"align='left:left'/></A>
<a href="#"><img id=rr src="http://www.yogamoves.net/img/knees2chest_right.jpg" width="60" height="30" border="0" align='left'/>
<a href="#"><img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='right' />
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Tosti</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p align='center'>kkkk</p><a href="#"><img src="IMG_0162.gif" width="200" height="10" border="0"align='left:left'/></A>
<a href="#"><img id=rr src="http://www.yogamoves.net/img/knees2chest_right.jpg" width="60" height="30" border="0" align='left'/>
<a href="#"><img src="http://www.yogamoves.net/img/knees2chest_left.jpg" width="60" height="30" border="0" align='right' />
</div>
<div class="fb_box">
<div class="pic">
<img src="imgs/fb_logo.gif" width="28" height="28" /></div>
</div>
<div class="tw_box">
<div class="pic">
<img src="imgs/tw_logo.gif" width="28" height="28"/></div>
</div>
</div>

[jhatter]

Thanks for your reply stringcugu.

I'm not sure what you've suggested here, maybe I haven't explained myself fully. Would you mind going through why your suggestion offers up a simpler solution than mine?

Not sure what the images you have added in your code were meant to do?

I look forward to your reply.

[simcomedia]

You could do it using positioning. For example (and explanation), the #sidebar is the containing div into which you want to place the images. Therefore it should be set to position: relative;

Then, your two image divs should be set to position: absolute; and using the top: 100px; and left: 50px; (numbers are just examples, not specific for use) they will position themselves accordingly from the top and left borders of the container.

So, with that said:

#sidebar {
float:left;
width:200px;
height:430px;
padding:0px;
border:1px solid;
position: relative;
}

.fb_box {
float:right;
width: 32px;
height: 32px;
margin:0px;
position:absolute;
top: 215px;
right: 37px;
background-color:#0066FF
}

.tw_box {
float:right;
width: 28px;
height: 28px;
margin:0px;
position:absolute;
top: 219px;
right: 5px;
background-color:#0066FF
}


You don't really need this (.pic below) since it's not doing anything specific. The background color was added to the two div's above. The tricky part is determining the coordinates from top and side to position the divs. What you may consider doing is wrapping both these into one div that is position:absolute; so you just need one set of coordinates instead of two.

.pic {
height: 28px;
width:28px;
border: 0px;
position:absolute;
bottom:0;
background-color:#0066FF
}


You might try:

#wrapper {
position: absolute;
top: 100px;
left: 25px;
}

Then:

<div id="wrapper">
<div class="fb_box">
<img here>
</div>
<div class="tw_box">
<img here>
</div>
</div> /* end of wrapper */

[stringcugu]

if you want the images on the bottom in side the DIV

<STYLE type=text/css>
.butover{background-color:#8e8462;color:#c9bda9;height:15px;width:15px;font-weight:bold;cursor:hand;cursorointer;border:0px solid black}
.butout{background-color:#c9bda9;color:#8e8462;height:15px;width:15px;cursor:hand;cursorointer;border:0px solid black}
</STYLE>
<DIV style="position:absolute; left:0px; top:0px; width:198px; height:360px;border:4px solid #8e8462;text-align:center;background-color:#c9bda9">
<DIV id="cont_div" style="position:absolute; left:0px; top:0px; width:150px; height:200px;clip:rect(0,150,260,0);font-size:12px;color:#808000;cursor:hand">
<div id="div_one" style="position:absolute; left:0px; top:0px; width:150px; padding:5px;filter:alpha(Opacity=100);text-align:left;background-color:#c9bda9"><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Tosti</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul></div>
<div id="div_two" style="position:absolute; left:0px; top:0px; width:150px; padding:5px;filter:alpha(Opacity=100);text-align:left;background-color:#c9bda9"></div>
</DIV>
<form style="position:relative; left:0px; top:335px">
<span style="color:#8e8462;font-size:12px">ON<span id="pause_time"> </span>THE BOTTOM</span>
<img src="imgs/fb_logo.gif" width="28" height="28" /><img src="imgs/fb_logo.gif" width="28" height="28" />
</form>
</DIV>