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

Barry Woolgar barry at burnthebook.co.uk
Mon Nov 19 08:58:30 CST 2007


Hello

> Subject: [thelist] "Vertical-align: bottom" for a DIV within a DIV?
> Does anyone know a way to achieve that?

As far as I know, 'vertical-align' is for inline elements and css table
cells. As the DIV is block level you need to look at the various positioning
options. 

There is no float: bottom unfortunately, but what you could do is ensure the
containing DIV is set to 'position: relative' (as it is currently) and set
the DIV to be positioned to 'position: absolute' (as you have also already
done). The final rule to set is 'bottom: 0px' to stick it to the bottom side
of the containing div. You can also set 'left/right/top' values as well, but
you'll need to check on the browser support for when you specify 'top' AND
'bottom', or 'left' AND 'right'. http://www.alistapart.com had an article
about this a month or so ago...

You might run into content overlap problems now tho... Have you considered
using a solid colour gif and dynamically setting the height/width values to
stretch it to the size you need? 

Hope that helps, and doesn't miss the point entirely :)

Barry

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of Stefan Schwarzer
Sent: 19 November 2007 14:03
To: thelist at lists.evolt.org
Subject: [thelist] "Vertical-align: bottom" for a DIV within a DIV?

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.

I've tried different things: vertical-align: bottom in one and both DIVs. In
the <td> in which they are. Etc, etc... but it won't work.

Does anyone know a way to achieve that?

Thanks for any hints!

Stef

  ____________________________________________________________________

   Stefan Schwarzer

   Lean Back and Relax - Enjoy some Nature Photography:
   http://photoblog.la-famille-schwarzer.de

   Appetite for Global Data? UNEP GEO Data Portal:
   http://geodata.grid.unep.ch
   ____________________________________________________________________





-- 

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester and archives
of thelist go to: http://lists.evolt.org Workers of the Web, evolt ! 


No virus found in this incoming message.
Checked by AVG Free Edition. 
Version: 7.5.503 / Virus Database: 269.16.0/1137 - Release Date: 18/11/2007
17:15
 

No virus found in this outgoing message.
Checked by AVG Free Edition. 
Version: 7.5.503 / Virus Database: 269.16.0/1137 - Release Date: 18/11/2007
17:15
 




More information about the thelist mailing list