I am attempting to convert some content layout on a site that I manage from
using a table to using CSS, but I cannot figure out how to do it.
The following HTML is a simplification of what I am trying to convert (you can
see the actual content layout on the home page of <http://www.NanimeW.Org.UK/>):
<table border="0" align="center">
<tr valign="bottom">
<td align="center">
<h1>Some content</h1>
<p>Some more<br />
content</p>
</td>
<td align="center">
<h2>Some content</h2>
<h3>Some more content</h3>
</td>
</tr>
</table>
Basically, it's two containers, side by side, horizontally centred in the
browser window. The containers are vertically aligned along the bottom edge.
The contents of both the containers are also horizontally centred. The widths
of the containers are not specified, as they should be determined by the amount
of space required to display their contents.
I've read a number of CSS layout tutorials, but they all seem to use containers
that have a width specified that is either a fixed amount or relative to the
parent container (e.g the width of the browser window). I don't want to have
to specify any widths (there would be no widths that would make any sense).
I've tried variations on the following, but there doesn't appear to be a way to
limit the width of the parent container to just be the width of its contents,
rather than the width of *its* parent (e.g. the window):
<body style="text-align: center;">
<div>
<div style="float: left;">
</div>
<div style="float: right;">
</div>
</div>
</body>
With a CSS layout solution, I would not mind if the right-hand container was
displayed below the left-hand one in cases where there is insufficient
horizontal space to display them side-by-side.
I would be grateful for any pointers.
[Happosai]
--
|\ | \ / /V\ Bringing together fans of Japanese
| \| a n i m e \/\/ =(@;@)= animation, graphic art and pop
~(,,) culture in the North-West of England
<http://www.NanimeW.Org.UK/> -=*=- <mailto:Info[at]NanimeW.Org.UK>
