CSS layout for box with two text labels? - html

Question

I have an unordered list of items, I want to display each item as a box with two lines of text inside, each line with different properties (font, size, text-align...). The markup I am using for each item looks like this:
<li id="1">
<p class="first"><!-- First line of text --></p>
<p class="last"><!-- Second line of text --></p>
</li>
Using CSS I want it to display sort of like this:
My questions are:
I know this can be achieved in various ways with CSS, but what is the right way or best practice to do it for best cross-browser support? can you point me to a CSS example for something similar? the first text label should be 2 px from the top border and the second one 2 px from the bottom.
Is this the right markup for the text labels? or should I be using other tags instead of <p>? maybe <div>?
I am using display: block for the <li> tags, with fixed width and height.
Thanks in advance.

Answer 1

If I understand correctly, this should be good:
Live Demo
Tested in IE7/IE8 and recent versions of: Firefox, Chrome, Safari, Opera.
I also tested in IE6, works there to.
I'm only doing all this testing because you specifically asked for the "best cross-browser support" :)
I might be tempted to change the <p> tags for <span> tags, because these don't really seem to be paragraphs of text.
CSS:
ul {
list-style: none;
font-size: 200%;
line-height: 0.8
}
li {
display: block;
width: 140px;
height: 100px;
background: #ccc;
padding: 2px;
border: 1px solid #000;
position: relative;
margin: 8px 0
}
li .last {
position: absolute;
bottom: 2px;
right: 2px
}
HTML:
<ul>
<li id="l1">
<p class="first">Text 1</p>
<p class="last">Text 2</p>
</li>
<li id="l2">
<p class="first">Text 1</p>
<p class="last">Text 2</p>
</li>
</ul>

Answer 2

You might be able to use a selector like this:
#1 p + p { padding-right: ..px }
Which if I know anything at all about CSS should get the adjacent sibling of the p element in #1

Answer 3

Here is how I would do it:
li
{
display: block;
padding: 2px;
height: xxpx; /* The height that you gave the li */
width: xxpx; /* The width that you gave the li */
}
li p
{
height: xxpx;
}
li p.first
{
float: left;
}
li p.second
{
float: right;
/*
To place the 2nd text at the bottom right corner you need to give it a
margin top
The value of this margin should be the total height of the li tag minus the
height of text (p tag) and minus the total vertical padding that is 4px.
*/
margin-top: xxpx;
}
I guess that will do it. Hope it helps.