CSS Forum

**blackhawkpowers** · 12:35 PM

I've got a question about vertical alignment I want to place an image at the bottom of my content area the code would look as follows...

HTML Code:

<html>
<body>
<div id="wrapper">
 <div id="menu">
 my menu here
 </div>
<div id="content">
 this is the information I want on the top
 <div id="bottomimage">
   <img scr="./pic.jpg">
 </div>
</div>
</div>
</body>
</html>
 
the css looks like this...
.bottomimage {
vertical-align: bottom;
}
.content {
float: right;
clear: both;
min-height: 500px;
}

i'm having no luck here anyone know how to position things vertically like that without having to add a huge padding or margin to that inner div or is that the only way?

**LadynRed** · 12-22-2006, 01:14 PM

One method would be to absolutely position #bottomimage relative to the BOTTOM of it's container #content. Just make sure #content is set to position: relative. Then position the image with bottom and right or left to place it where you want it.

**blackhawkpowers** · 12-22-2006, 01:21 PM

I was trying to avoid absolute positioning but you think that's how I'm going to have to do it? I was just not wanting to do absolute positioning because if I have a page with more content that goes all the way to 500px then the image is going to be over the top of the text correct?

**LadynRed** · 12-22-2006, 01:25 PM

Not it you set the #content div to position: relative. The absolutely positioned image box will be positioned relative to the BOTTOM of the #content div.. so if the bottom of #content moves, so should your image box.

See the code I used for a similar image position on the home page of this site:
http://www.dlamping.com

That bottom picture of the building front is done just this way.

**blackhawkpowers** · 12-22-2006, 01:37 PM

ok so far so good giving me a bit of an issue with wanting to stack my images though it's got several there tha I want to go horizontally across my footer code is as follows...

applicable css

Code:

#bottomofcontent {
  position: absolute;
  bottom: 0;
  right: 10px;
}
#content {
  position: relative;
 margin-left: 240px;
 line-height: 18px;
 padding-right: 20px;
 min-height: 500px;
 border: 1px dashed orange;
}

HTML Code:

  <h5><strong style="color: #FF0000;"><div id="dynloadarea">
 </div>
 Here are some of our newest cap styles 
          and designs that we have created. We can construct a cap for you with 
          any number of options and fabrics, giving you an unlimited number of 
          capabilities for a cap style.</strong></h5>
 
<div id="bottomofcontent">
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg1)"><img border="0" src="images/caps/600-1815.50.gif"  onMouseOver="modifyimage('dynloadarea', 0)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg2)"><img border="0" src="images/caps/camo/cap11-11.gif" onMouseOver="modifyimage('dynloadarea', 1)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg3)"><img border="0" src="images/caps/camo/cap11-31.gif" onMouseOver="modifyimage('dynloadarea', 2)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg4)"><img border="0" src="images/caps/600-1437.50.gif" onMouseOver="modifyimage('dynloadarea', 3)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg5)"><img border="0" src="images/caps/5300-1714.50.gif" onMouseOver="modifyimage('dynloadarea', 4)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg6)"><img border="0" src="images/caps/1047-1433.50.gif" onMouseOver="modifyimage('dynloadarea', 5)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg7)"><img border="0" src="images/caps/700-1402.50.gif" onMouseOver="modifyimage('dynloadarea', 6)"></a>
<a href="javascript://" onMouseOver="writeToLayer('infoDiv', msg8)"><img src="images/fabrics/camo/realtree50.gif" width="44" height="39" border="0" onMouseOver="modifyimage('dynloadarea', 7)"></a>
</div>

**blackhawkpowers** · 12-22-2006, 02:48 PM

problem is fixed but I'll post what happened here for everyone to see (even though it's super embarassing) I was lazy earlier in the Style sheet and took the easy way out and had this

Code:

#content img{
  float: right;
  clear: both;
  padding: 1px;
  background: #cccccc;
  border: 4px solid #f0f0f0;
}

which obviously was trying to float all my images on the right and they were stacking vertically..

**LadynRed** · 12-22-2006, 04:22 PM

Glad you got it !