Table layout using CSS

Hi everyone. I'm trying to emulate a simple table layout using CSS only.
This hyperlink (http://homepage.ntlworld.com/r.morris7/tabledemo.htm) shows
the intended result, which I've knocked up using a table.

Please note a couple of things. The second line of text in the right-hand
columns don't wrap beneath the italic heading. The first column contains a
heading (of sorts, not an actual <hx> element) that is aligned to the right.

Any help would be much appreciated!

Oli

re: Table layout using CSS

news.ntlworld.com wrote:[color=blue]
> Hi everyone. I'm trying to emulate a simple table layout using CSS only.
> This hyperlink (http://homepage.ntlworld.com/r.morris7/tabledemo.htm) shows
> the intended result, which I've knocked up using a table.[/color]

It always great when people are going to a more structured document.
[color=blue]
> Please note a couple of things. The second line of text in the right-hand
> columns don't wrap beneath the italic heading. The first column contains a
> heading (of sorts, not an actual <hx> element) that is aligned to the right.
>
> Any help would be much appreciated![/color]

Could you explain what the content is going to be? There are multiple
solutions for this problem without tables, but to select the right one,
we (I) need to know what kind of data is going to be in there.


--
Anne van Kesteren
<http://www.annevankesteren.nl/>

re: Table layout using CSS

> Could you explain what the content is going to be? There are multiple[color=blue]
> solutions for this problem without tables, but to select the right one,
> we (I) need to know what kind of data is going to be in there.
>[/color]

Hi Anne, it's actually going to be used for part of an HTML copy of my
Curriculum Vitae (resume). I'd like to have a heading (e.g. Languages) and
then a body of text following (e.g. Java, HTML, SQL etc.). The body of text
is only 2-4 lines of text but it's important that it doesn't wrap beneath
the heading.

I've had some mixed success, for example:

<p>Languages<span style="left: 150px; position: absolute">Java, JSP,
Servlets and JavaBeans; HTML, CSS, DOM and JavaScript; XML, DTD, XSLT and
X-Schema; SQL, PL-SQL and Oracle XSQL; UML.</span></p>

This almost works but I can't align the first word ('Languages') to the
right (refer to the table mockup for an example).

I also experimented with DIV layers:

<div style="position: absolute; text-align: right; width:
150px"><p>Languages</p></div>
<div style="position: absolute; left: 170px"><p>Java, JSP, Servlets and
JavaBeans; HTML, CSS, DOM and JavaScript; XML, DTD, XSLT and X-Schema; SQL,
PL-SQL and Oracle XSQL; UML.</p></div>

However, when I added more DIV layers (i.e. for another heading and body of
text) it overlapped the first heading and body of text. I suppose I could
offset the subsequent layers but I'd like a more fluid design which would
stand up to fonts being resized etc. and would be suitable for print and
screen.

re: Table layout using CSS

Oli wrote:
[color=blue]
> Hi Anne, it's actually going to be used for part of an HTML copy of my
> Curriculum Vitae (resume). I'd like to have a heading (e.g. Languages) and
> then a body of text following (e.g. Java, HTML, SQL etc.). The body of text
> is only 2-4 lines of text but it's important that it doesn't wrap beneath
> the heading.[/color]

That makes it more clear. Thanks.

Without DOCTYPES etc, just a simple example:

<style type="text/css">
html{
font:85%/1.3 Arial,sans-serif;
}
h1{
font-size:1.5em
}
h2{
float:left;
width:15em;
font-size:1em;
}
div.section{
width:20em;
}
p{
margin:0;
padding:.1em 1em;
}
</style>
<h1>Document title</h1>
<h2>Section header</h2>
<div class="section">
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
<h2>Section header</h2>
<div class="section">
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>


--
Anne van Kesteren
<http://www.annevankesteren.nl/>

re: Table layout using CSS

Thanks for the reply, Anne. It's pointed me in some new directions to
experiment with.