The display:inline declaration was unnecessary in this context. I
accidentally left it in when playing around with the box positioning. It
worked in aye-eeeh 6, but it came unstuck in Opera 6. Maybe it could be
tweaked to work reliably.

-----Original Message-----
From: George Karabelas [mailto:[EMAIL PROTECTED] 
Sent: Friday, 26 September 2003 12:22 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Vertically aligned text without tables


Thanks Russ & James,

James, looks like it should work. I'll play around with it to see if I
can get consistent results. At the moment some of the boxes are offset
by a few pixels in Opera and Mozilla but I feel it's somehow related the
the rest of my page. Thanks!

cheers,
George


> -----Original Message-----
> From: James Gollan [mailto:[EMAIL PROTECTED]
> Sent: Friday, 26 September 2003 11:00 AM
> To: [EMAIL PROTECTED]
> Subject: RE: [WSG]Vertically aligned text without tables
> 
> 
> 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/
***************************************************** 

*****************************************************
The discussion list for http://webstandardsgroup.org/
***************************************************** 



*****************************************************
The discussion list for http://webstandardsgroup.org/
***************************************************** 

Reply via email to