Sent by Bill Brown on 26 June 2008 13:01
Fred Janon wrote:
> Hi Bill,
> It's just an excerpt. Let's replace the inputs with a SPAN with some text
> then to ease the discussion. Sorry I don't have a link to a real page at the
> moment.
> Thanks for helping.
No worries.
Vertical alignment is a notorious bugbear for CSS. The principle remains
the same as in the last example I sent along. Here's an example with
SPANs instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Align Bottom</title>
<style type="text/css">
#alignBottom {
background-color: #cccccc;
height: 100px;/* same as background graphic */
position: relative;
}
#alignBottom div {
background-color: #dedede;
bottom: 0;
position: absolute;
width: 100%;
}
#alignBottom div span {
font-weight: bold;
padding: 0 5px;
}
</style></head><body>
<div id="alignBottom"><div><span>Sample Block 1.</span>
<span>Sample Block 2.</span></div></div></body></html>
In theory, that nested DIV is unnecessary since you could also place the
SPANs absolutely but then you get into all kinds of overlapping issues.
I find it's generally easier to simply use the wrapper DIV.
Hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com & MacNimble.com
* From dot concept...to dot com...since 1999.
***********************************************/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
