|
Posted by david.d.hooker on March 29, 2006, 10:36 pm
Please log in for more thread options
I'm having trouble coming up with a CSS box or table with the following
specs:
3 columns, 1 row:
Left cell is left aligned, and sized to its content (a logo image)
Right cell is right aligned, and sized to its content (a few lines of
contact details that are left aligned)
Middle cell has centred text, and occupies all remaining horizontal
space
I would rather not specify the widths of the cell (not such a problem
sizing the left cell (although it would be nice to use em or ex sizes
on the gif) but I don't know in advance how wide the right cell would
need to be (I think that em or ex sizes would not be accurate when
using a proportional font).
I don't want the left, middle or right columns to overlap.
The box or table must be as wide as the screen, and be as high as the
tallest cell. I plan on placing this box at the top of a (X)HTML
document.
I am planning on giving the box/table a hairline border and a
background, so the contents of the cells must not grow larger than the
containing box/table (I've noticed that absolute positioning seems to
do this).
I've search through Google for this, but every article requires
specifying the widths of the columns in percentages (how do I estimate
the percentage of the right cell?), or in pixels (ditto). Em/Ex might
work, but I don't think that it would stand up to proportional fonts or
font-substitution.
Thankyou all in advance.
|
|
Posted by david.d.hooker on March 29, 2006, 10:56 pm
Please log in for more thread options
An example would be this incorrect HTML4 (which renders correctly in
Opera 8.51, Firefox 1.5.01, IE 6; all running on WinXP):
<html><body><table width="100%" border="1">
<colgroup><col width="0*"><col width="100%"><col
width="0*"></colgroup>
<tr><td>abc</td><td>def</td><td>ghi</td>
</table></body></html>
|
|
Posted by david.d.hooker on March 29, 2006, 10:59 pm
Please log in for more thread options
Missed the closing </tr>:
<html><body><table width="100%" border="1">
<colgroup><col width="0*"><col width="100%"><col
width="0*"></colgroup>
<tr><td>abc</td><td>def</td><td>ghi</td> </tr>
</table></body></html>
|
|
Posted by Beauregard T. Shagnasty on March 29, 2006, 11:28 pm
Please log in for more thread options
david.d.hooker@gmail.com wrote:
[Please see this page:]
http://www.safalra.com/special/googlegroupsreply/
> An example would be this incorrect HTML4 (which renders correctly in
> Opera 8.51, Firefox 1.5.01, IE 6; all running on WinXP):
>
> <html><body><table width="100%" border="1">
> <colgroup><col width="0*"><col width="100%"><col
> width="0*"></colgroup>
> <tr><td>abc</td><td>def</td><td>ghi</td>
> </table></body></html>
That is not a three-column CSS layout, as was asked for.
OP: look at a couple of these and make a template.
<http://webhost.bridgew.edu/etribou/layouts/3col_footer/archives/3col_footer_02/index.html>
<http://www.intensivstation.ch/en/templates/>
<http://bluerobot.com/web/layouts/layout3.html>
<http://www.benmeadowcroft.com/webdev/>
and I'm sure you can find something here:
<http://nemesis1.f2o.org/templates>
--
-bts
-Warning: I brake for lawn deer
|
|
Posted by david.d.hooker on March 30, 2006, 1:37 am
Please log in for more thread options
All of the above links use widths specified in either pixels, percent
or em. I couldn't find a site that sizes the cell to fit the size of
its content at the time it is rendered, and not some arbitrary size
specified in advance.
There are some interesting articles in the links you provided
(especially nemesis), so I do have some reading in front of me.
Sorry about the "columns", I missed a spot when editing my post after
realising that I only want cells and not columns (only one row, after
all).
So, is there a CSS equivalent of HTML4's <col width="0*"> (which forces
the cell to be no wider than its content) and <col width="*"
align="center"> (which causes the cell to expand to fill all available
horizontal space, and centres the contents on the screen)?
Thankyou for your post.
|
| Similar Threads | Posted | | How to align this? | December 2, 2005, 7:05 am |
| Align Right | July 14, 2006, 12:33 pm |
| img align=right :-( | May 31, 2008, 10:15 pm |
| Trying to align something at the very bottom | August 19, 2006, 3:50 pm |
| How do I align a link? | September 17, 2006, 12:45 am |
| div align attribute | September 4, 2007, 6:20 am |
| text align right | November 5, 2007, 8:25 pm |
| center align a page | August 5, 2005, 2:27 am |
| div align bottom inside a td | February 5, 2006, 7:27 pm |
| Image Align problems | November 9, 2007, 2:48 am |
|
XML Sitemap