paragraph & character attributes

[questions]

Hi,

I'm trying to put several paragraphs across a page without using a table.
So I'm defining different classes.

CSS
p.spirit1 {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
margin-top: 0;
text-align: right;
}
p.spirit2 {
position: absolute;
top: 0px;
left: 207px;
width: 200px;
margin-top: 0;
text-align: left;
}

HTML
<p class="spirit1">spirit and so on</p>
<p class="spirit2">and so forth
<br>and so forth</p>

That works fine until I add the following tag to make some of text darker
.italicdark { font-style: italic; color: #333333;}
<p class="spirit1"><div class="italicdark">spirit</div>and so on</p>
And the following tag to make the second line taller:
.tallline {line-height: 0.1em}
<p class="spirit2">and so forth
<br><div class="tallline">and so forth</div></p>

Then nothing is in place anymore and I get closing errors in validator about having an extra </p> closer, when there really is just one after the </div> closer.

I know something is wrong but I've searched all over the web and really can't figure it out...

THANKS!

[TheJoshMan]

Well, just glancing I can tell you that by defining the "line-height" to "0.1em", that is actually defining the line-height as 1/10th of current or default.

See link below for help with that, also... could you post up a link to the page you're having trouble with?


http://www.w3schools.com/css/css_units.asp

[questions]

OK. I posted here.
http://www.freewebs.com/testpractic/spirit.html
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Ftestpractic%2Fspirit.html&charset=(detect+automatically)&doctype=Inline&group=0
(Disregard the head tag error).

You see how the text that is supposed to be in the "third column" actually ends up in the first column. Also, the text in the first column is not aligned as per code (right). And I didn't say return to the first line but it did it anyway.

Here it is without the div tags for formatting the text and line height and everything falls in the right place.

http://www.freewebs.com/testpractic/spirit2.html
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.freewebs.com%2Ftestpractic%2Fspirit2.html&charset=(detect+automatically)&doctype=Inline&group=0

The reason for the .1em is because I want just a slight break between the lines and what happens is that the <p> command makes a really gigantic automatic break. In the old days I would type with tiny invisible font to make this little break but that was really complicated.

http://www.freewebs.com/testpractic/web2.css
I tried putting both #italicdark and .italicdark for the "div style=" and they both came out the same. Not sure which one is right.

THANK YOU 9LIVES!

[questions]

I figured it out! It was just bad CSS lingo...
You can't put a <div class> tag between <p></p>. It's got to be outside of it.
So I changed it to <p><span class>text</span></p> and it works!