I'm probably missing something here (so just ignore this post), but what
about a containing div with positioning relative, and then position your
boxes within this div. Your text inside is positioned absolutely from
the bottom of the containing box.
<style type="text/css">
#sectionheader
{
position:relative;
}
#box1, #box2, #box3
{
position:absolute;
display:inline;
margin:10px;
height:100px;
width:100px;
border:1px solid #666;
}
#box2 {
left:110px
}
#box3 {
left:220px
}
.bottom_text
{
position:absolute;
bottom:0px;
margin:10px;
}
</style>
</head>
<body>
<div id="sectionheader">
<div id="box1"><p class="bottom_text">some text</p></div>
<div id="box2"><p class="bottom_text">more text</p></div>
<div id="box3"><p class="bottom_text">more text</p></div>
</div>
It would be more elegant with display:inline for the boxes, but that
caused problems for Opera (don't know why!??).
James
-----Original Message-----
From: George Karabelas [mailto:[EMAIL PROTECTED]
Sent: Thursday, 25 September 2003 7:43 PM
To: [EMAIL PROTECTED]
Subject: [WSG]Vertically aligned text without tables
hi everyone,
Time to stop lurking.
We have recently converted our corporate site (http://hww.com.au) from a
table based layout to (almost) pure CSS. Unfortunately I have had to use
a table to align text to the bottom of a box. See:
http://hww.com.au/syndication/ (the 3 boxes below the header and above
the content id="subHeading")
Can this be achieved without tables?
cheers,
George
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
