[thelist] "Vertical-align: bottom" for a DIV within a DIV?

[ben morrison]

On Nov 19, 2007 2:02 PM, Stefan Schwarzer <st.schwarzer at geois.de> wrote:
> Hi there,
>
> I am displaying simple bar charts for a ranking visualization of
> search results. The one DIV is kind of the container, the second DIV
> displays a varying part of an image.
>
> <div style='position:relative; margin-left: 2px; width: 6px; height:
> 20px; background-color: #fff; vertical-align: bottom'>
>         <div style='position: absolute; background:URL(images/
> bar_vertical_blue.png) no-repeat bottom; height: 3px; width: 6px;
> border: 1px solid #0f0;'>
>         </div>
> </div>
>
> But it does it with a vertical-align : top. I want to have however a
> vertical-align : bottom.
>

You could use position:relative as per the previous post, here's a
quick example using a UL to add some semantics

<ul>
    <li><span style="height:40px">20%</span><li>
    <li><span style="height:60px">30%</span><li>
    <li><span style="height:100px">50%</span><li>
</ul>


 ul {list-style:none;
	       position:relative;
	       margin:0;
	       padding:0;
	       border-bottom:1px solid #000;
	       float:left;
	      }
	       ul li {
	           margin:0 5px 0 5px;
	            padding:0 5px 0 5px;
	           position:relative;
	            height:200px;
	            float:left;
	       }
	       ul li span {
	           text-indent:-999em;
	           width:20px;
	           background:#ccf;
	           display:block;
	           position:absolute;
	           bottom:0;
	       }




Ben
-- 
Ben Morrison
http://www.benjaminmorrison.com