[thelist] "Vertical-align: bottom" for a DIV within a DIV?
ben morrison
morrison.ben at gmail.com
Mon Nov 19 09:17:16 CST 2007
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
More information about the thelist
mailing list