[thelist] Aligning an image to the bottom of multiple lines of text in CSS

[Maximillian Schwanekamp]

Roger Ly wrote:

>I can't seem to get any good alignment going.
>  
>
How about modifying the markup to give elements ids or classes, like:
<div id="container">
  <img id="myimage" src="yada.gif" alt="yada" />
  <div id="inner"> blah blah
  </div>
</div>

CSS:
#container { position: relative; width: 500px; height:200px; border: 1px 
solid #ccc; }
#myimage { position: absolute; bottom: 0; left: 0; }
#inner { position: absolute; right: 0; bottom: 0; width: 350px; }

Is that approaching what you're after?  If you need #container to be an 
arbitrary height according to the amount of content, you could use 
floats instead, and add a "clearing element":
How about modifying the markup to give elements ids or classes, like:
<div id="container">
  <img id="myimage" src="yada.gif" alt="yada" />
  <div id="inner"> blah blah
  </div>
  <div class="clearing"></div>
</div>

#container {border: 1px solid #ccc; width: 500px; }
#myimage { float: left; margin: 0 1em;}
#inner { float: right; width: 350px; }
.clearing { clear: both; }


-- 
Maximillian Von Schwanekamp
Dynamic Websites and E-Commerce
NeptuneWebworks.com <http://www.neptunewebworks.com/>
voice: 541-302-1438
fax: 208-730-6504